/* eslint-disable no-unreachable */
/* eslint-disable no-unused-vars */
import $ from 'jquery';
import html2canvas from 'html2canvas';
import eqLed from '../const/eqLed.js';

// import {canvasToImage} from '@/utils/common';
// import { upload } from '@/services/file';
export default class LedScreen {
  constructor(_options, bus, message, pageType) {
    console.log(_options);
    this.bus = bus;
    this.message = message;
    //1新增、2详情、3复制
    this.pageType = pageType;
    //屏幕配置
    this.options = _options;
    this.pro = _options.pro;
    this.windowInfoList = _options.windowInfoList;
    this.animationArr = [];
    this._widthArr = [];
    this.partitions_helpdata = this.initHelpdata();
    this.partitionActiveID = this.pageType == 3 ? this.windowInfoList.length - 1 : 0; //默认第一个，复制激活最后一个
    this.partitionStacked = false;
    this.zoomLevelSet = [0.125, 0.25, 0.5, 1, 2, 4, 8];
    this.fontRelation = {
      宋体: 'songfontSizeMap',
      楷体: 'kaifontSizeMap',
      黑体: 'heifontSizeMap',
      微软雅黑: 'yaheifontSizeMap',
    };
    this.borderInterval = [];
    this.dayList = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
    this.multiple = 4;
    this.speedMap = [0, 13.2, 7.2, 6];
    this.init();
    this.initEvent();
  }
  /*> 初始化 */
  /**
   * 是否是改变设备引起的初始化，如果改变设备，需要自动缩放窗口尺寸
   * @param {*} isChangeScreen
   */
  init() {
    $('.screen').css({
      width: this.pro.width * this.pro.zoom + 'px',
      height: this.pro.height * this.pro.zoom + 'px',
    });
    this.autoZoom();
    $('.zoom-input').val(this.pro.zoom);
    console.log(this.windowInfoList);

    if (this.windowInfoList.length > 0) {
      let timer = setTimeout(() => {
        $(`.draggable.sid${this.windowInfoList[this.windowInfoList.length - 1].key}`).click();
        clearTimeout(timer);
      }, 100);
      this.updatePartitionNav();
      this.updatePartitionBlock();
    }
    let dtimer = setTimeout(() => {
      this.drawScreenSize();
      clearTimeout(dtimer);
    }, 100);
  }
  /*> 初始化事件 */
  initEvent() {
    /*====================================================================================================
     * Block_分区展示区事件
     *====================================================================================================
     */

    $('.screen').on('click', '.draggable', (e) => {
      let i = $(e.currentTarget).index();
      this.focusPartition(i, 1);
      this.updatePartitionBlock();
      let allClass = $(e.currentTarget).attr('class');
      let regex = /sid[\d]/;
      let key = allClass.match(regex)[0].replace('sid', '');
      this.bus.$emit('focusTabs', +key);
    });
    /*> 点击拖拽视图分区*/
    $('.screen').on('mousedown', '.droptools', (e) => {
      let current = e.currentTarget;
      let pid = $(current).parent('.draggable').index();
      let posix = {
        l: $(current).parents('.draggable').offset().left,
        t: $(current).parents('.draggable').offset().top,
        w: $(current).parents('.screen').width(),
        h: $(current).parents('.screen').height(),
        xw: $(current).parents('.draggable').outerWidth(),
        xh: $(current).parents('.draggable').outerHeight(),
      };
      let x = e.pageX - posix.l;
      let y = e.pageY - posix.t;
      $('.screen').mousemove((e) => {
        let mcurrent = e.currentTarget;
        let offset = $(mcurrent).offset();
        let left = e.pageX - offset.left - x;
        let top = e.pageY - offset.top - y;

        if (left < 0) {
          left = 0;
        } else if (left > posix.w - posix.xw) {
          left = posix.w - posix.xw;
        } else {
          left = e.pageX - offset.left - x;
        }
        if (top < 0) {
          top = 0;
        } else if (top > posix.h - posix.xh) {
          top = posix.h - posix.xh;
        } else {
          top = e.pageY - offset.top - y;
        }
        $('.draggable').eq(pid).css({ left: left, top: top });
        let value = $('.draggable').eq(pid).offset().left - $('.screen').offset().left;
        let count = parseInt(value / (this.pro.zoom * this.multiple)) * (this.pro.zoom * this.multiple);
        $('.draggable').eq(pid).css('left', count);
        this.windowInfoList[pid]['x'] = count / this.pro.zoom;

        value = $('.draggable').eq(pid).offset().top - $('.screen').offset().top;
        count = parseInt(value / (this.pro.zoom * this.multiple)) * (this.pro.zoom * this.multiple);
        $('.draggable').eq(pid).css('top', count);
        this.windowInfoList[pid]['y'] = count / this.pro.zoom;

        this.updatePartitionBlock();

        this.validation();
        $(mcurrent).mouseup(function () {
          $('.screen').unbind('mousemove');
        });
        $(mcurrent).mouseleave(function () {
          $('.screen').unbind('mousemove');
        });
      });
      $(current).mouseup(function () {
        $('.screen').unbind('mousemove');
      });
    });
    /*> 分区缩放*/
    $('.screen').on('mousedown', '.coor', (e) => {
      let current = e.currentTarget;
      e.stopPropagation();
      let pid = $(current).parent('.draggable').index();
      let posix = {
        l: $(current).parents('.draggable').offset().left,
        t: $(current).parents('.draggable').offset().top,
        w: $(current).parents('.draggable').width(),
        h: $(current).parents('.draggable').height(),
        fl: $(current).parents('.screen').offset().left,
        ft: $(current).parents('.screen').offset().top,
        fw: $(current).parents('.screen').width(),
        fh: $(current).parents('.screen').height(),
        x: e.pageX,
        y: e.pageY,
      };

      $('.view').mousemove((event) => {
        let vcurrent = event.currentTarget;
        event.stopPropagation();
        let width = event.pageX - posix.x + posix.w;
        let height = event.pageY - posix.y + posix.h;
        if (width > posix.fw - (posix.l - posix.fl)) {
          width = posix.fw - (posix.l - posix.fl);
        }
        if (height > posix.fh - (posix.t - posix.ft)) {
          height = posix.fh - (posix.t - posix.ft);
        }

        $('.draggable')
          .eq(pid)
          .css({
            width: Math.max(this.multiple * this.pro.zoom, width),
            height: Math.max(this.multiple * this.pro.zoom, height),
          });
        let value = $('.draggable').eq(pid).outerWidth();
        let count = parseInt(value / (this.pro.zoom * this.multiple)) * (this.pro.zoom * this.multiple);
        $('.draggable').eq(pid).css('width', count);
        this.windowInfoList[pid]['width'] = count / this.pro.zoom;

        value = $('.draggable').eq(pid).outerHeight();
        count = parseInt(value / (this.pro.zoom * this.multiple)) * (this.pro.zoom * this.multiple);
        $('.draggable').eq(pid).css('height', count);
        this.windowInfoList[pid]['height'] = count / this.pro.zoom;

        this.partitions_helpdata[this.partitionActiveID]['currentpage'] = 1;
        this.updatePartitionBlock();
        this.validation();

        $(vcurrent).mouseup(function () {
          $('.view').unbind('mousemove');
        });
        $(vcurrent).mouseleave(function () {
          $('.view').unbind('mousemove');
        });
      });
      $(current).mouseup(function () {
        $('.view').unbind('mousemove');
      });
    });
    /*> 点击 翻页 */
    $('.prevpage').click(() => {
      this.stopAni();
      if (this.animationArr.length === 0) {
        let p = $('.screenpreview .page').html().split('/');
        if (parseInt(p[0]) > 1) {
          $('.screenpreview .page').html(+p[0] - 1 + '/' + p[1]);
          this.partitions_helpdata[this.partitionActiveID]['currentpage'] = +p[0] - 1;
          this.updatePartitionBlock();
        }
      }
    });
    $('.nextpage').click(() => {
      this.stopAni();
      if (this.animationArr.length === 0) {
        let p = $('.screenpreview .page').html().split('/');
        if (parseInt(p[0]) < parseInt(p[1])) {
          $('.screenpreview .page').html(+p[0] + 1 + '/' + p[1]);
          this.partitions_helpdata[this.partitionActiveID]['currentpage'] = +p[0] + 1;
          this.updatePartitionBlock();
        }
      }
    });
    /*====================================================================================================
     * Block_Navbar导航条事件
     *====================================================================================================
     */
    $('.partition_nav').on('click', '.delete_partition', (e) => {
      e.stopPropagation();
      let current = e.currentTarget;
      let pid = $(current).parents('.partition_item').index();
      console.log('排序是' + pid);
      if (this.partitionActiveID >= pid && this.partitionActiveID != 0) this.partitionActiveID--;
      this.removePartition(pid);
      this.bus.$emit('changeWindowInfo', this.windowInfoList);
      this.updatePartitionNav();
      this.updatePartitionBlock();
      this.bus.$emit('closeTabs', +pid);
      $('.selected').click();
    });
    /*> 点击导航中的分区项 */
    $('.partition_nav').on('click', '.item_title', (e) => {
      let current = e.currentTarget;
      $(current).parents('.partition_item').addClass('selected');
      this.focusPartition($(current).parent('.partition_item').index()).updatePartitionBlock();
      let allClass = $(current).parent('.partition_item').attr('class');
      let regex = /sid[\d]/;
      let key = allClass.match(regex)[0].replace('sid', '');
      this.bus.$emit('focusTabs', +key);
    });

    /*====================================================================================================
     * Block_Textarea 设置版块事件
     *====================================================================================================
     */
  }

  /*> 数据改变 */
  changeOptions(_options) {
    console.log(_options);
    this.options = _options;
    this.pro = _options.pro;
    this.windowInfoList = _options.windowInfoList;
    this.init(true);
  }
  /*> 初始化辅助数据 */
  initHelpdata() {
    let i = 0;
    let s = [];
    for (i in this.windowInfoList) {
      s.push({
        sid: this.windowInfoList[i]['key'] || parseInt(i) + 1,
        open: '',
        activeItemIndex: 0,
        currentpage: 1,
        currentTotalpage: 1,
      });
    }
    if (this.windowInfoList.length > 0) {
      s[this.windowInfoList.length - 1]['open'] = ' open';
    }
    return s;
  }
  /*> 自动适应缩放 */
  autoZoom() {
    let container_width = $('.Play-tab .view').width();
    let container_height = $('.Play-tab .view').height();
    console.log(container_width);
    let screen_width = $('.screen').width();
    let screen_height = $('.screen').height();
    if (container_width / container_height < screen_width / screen_height) {
      // 缩放宽
      if (container_width > screen_width) {
        // 放大
        for (screen_width *= 2; screen_width <= container_width; screen_width *= 2) {
          this.changeZoom('+');
        }
      } else {
        // 缩小
        for (container_width; container_width <= screen_width; container_width *= 2) {
          this.changeZoom('-');
        }
      }
    } else {
      // 缩放高
      if (container_height > screen_height) {
        // 放大
        for (screen_height *= 2; screen_height <= container_height; screen_height *= 2) {
          this.changeZoom('+');
        }
      } else {
        // 缩小
        for (container_height; container_height <= screen_height; container_height *= 2) {
          this.changeZoom('-');
        }
      }
    }
    $('#edit').attr('class', 'zoom' + this.pro.zoom);
  }
  changeZoom(operate) {
    this.stopAni();
    let w = $('.screen').width();
    let h = $('.screen').height();
    let current = this.pro.zoom;
    let i;
    if (operate == '-') {
      for (i = this.zoomLevelSet.length - 1; i >= 0; i--) {
        if (this.zoomLevelSet[i] < this.pro.zoom) {
          this.pro.zoom = this.zoomLevelSet[i];
          break;
        }
      }
    }
    if (operate == '+') {
      for (i = 0; i < this.zoomLevelSet.length; i++) {
        if (this.zoomLevelSet[i] > this.pro.zoom) {
          this.pro.zoom = this.zoomLevelSet[i];
          break;
        }
      }
    }
    //节目缩放
    let zoomformat;
    if (this.pro.zoom < 1) {
      zoomformat = '1/' + 1 / this.pro.zoom;
    } else {
      zoomformat = this.pro.zoom;
    }
    $('.zoom-input').val(zoomformat);
    $('.screen').css({
      width: (w / current) * this.pro.zoom + 'px',
      height: (h / current) * this.pro.zoom + 'px',
    });
    this.updatePartitionBlock();
  }
  updateOnePartitionBlock(i){
    let width = this.windowInfoList[i].width * this.pro.zoom;
    let height = this.windowInfoList[i].height * this.pro.zoom;
    $(`.draggable.sid${this.partitions_helpdata[i]['sid']}`).empty();
    let _html =
      '<div class="program"><canvas width="' +
      width +
      '" height="' +
      height +
      '"></canvas><canvas width="' +
      width +
      '" height="' +
      height +
      '"></canvas><canvas style="display:none;" width="' +
      width +
      '" height="' +
      height +
      '"></canvas></div><div class="droptools"></div><div class="coor"></div>';
    if (this.windowInfoList[i].type == '4' && this.pageType == '3') {
      this.createTable(this.windowInfoList[i], false);
    }
    $(`.draggable.sid${this.partitions_helpdata[i]['sid']}`).append(_html);
    this.renderOne(i);
  }
  /*> 更新分区版块 */
  updatePartitionBlock() {
    console.log('更新分区板块');
    console.log(this.windowInfoList);
    let layer2_html = '';
    let width, height;
    //添加或复制可编辑
    if (this.pageType != 2) {
      // 渲染 HTML
      for (let i in this.windowInfoList) {
        width = this.windowInfoList[i].width * this.pro.zoom;
        height = this.windowInfoList[i].height * this.pro.zoom;
        layer2_html +=
          '<div class="draggable sid' +
          this.partitions_helpdata[i]['sid'] +
          '" style="left: ' +
          this.windowInfoList[i].x * this.pro.zoom +
          'px; top: ' +
          this.windowInfoList[i].y * this.pro.zoom +
          'px; width: ' +
          width +
          'px; height: ' +
          height +
          'px;"><div class="program"><canvas width="' +
          width +
          '" height="' +
          height +
          '"></canvas><canvas width="' +
          width +
          '" height="' +
          height +
          '"></canvas><canvas style="display:none;" width="' +
          width +
          '" height="' +
          height +
          '"></canvas></div><div class="droptools"></div><div class="coor"></div></div>';
        if (this.windowInfoList[i].type == '4' && this.pageType == '3') {
          this.createTable(this.windowInfoList[i], false);
        }
      }
    } else {
      //详情不可编辑
      for (let i in this.windowInfoList) {
        width = this.windowInfoList[i].width * this.pro.zoom;
        height = this.windowInfoList[i].height * this.pro.zoom;
        layer2_html +=
          '<div class="draggable sid' +
          this.partitions_helpdata[i]['sid'] +
          '" style="left: ' +
          this.windowInfoList[i].x * this.pro.zoom +
          'px; top: ' +
          this.windowInfoList[i].y * this.pro.zoom +
          'px; width: ' +
          width +
          'px; height: ' +
          height +
          'px;"><div class="program"><canvas width="' +
          width +
          '" height="' +
          height +
          '"></canvas><canvas width="' +
          width +
          '" height="' +
          height +
          '"></canvas><canvas style="display:none;" width="' +
          width +
          '" height="' +
          height +
          '"></canvas></div></div>';
        if (this.windowInfoList[i].type == '4') {
          this.createTable(this.windowInfoList[i], false);
        }
      }
    }
    $('.screen .layer2').html(layer2_html);
    //渲染 canvas
    // let  canvas, ctx, border_canvas, border_ctx;
    for (let i in this.windowInfoList) {
      this.renderOne(i);
    }

    // 渲染分页
    if (this.windowInfoList.length) {
      $('.screenpreview .page').html(this.partitions_helpdata[this.partitionActiveID]['currentpage'] + '/' + this.partitions_helpdata[this.partitionActiveID]['currentTotalpage']);
      $('.screenpreview').show();
    } else {
      $('.screenpreview').hide();
    }
    $('.draggable').eq(this.partitionActiveID).addClass('active').siblings().removeClass('active');
    this.validation();
    return this;
  }
  //点击播放动画重新渲染
  updateAnimationBlock() {
    let layer2_html = '';
    let width, height;
    for (let i in this.windowInfoList) {
      width = this.windowInfoList[i].width * this.pro.zoom;
      height = this.windowInfoList[i].height * this.pro.zoom;
      layer2_html +=
        '<div class="draggable sid' +
        this.partitions_helpdata[i]['sid'] +
        '" style="left: ' +
        this.windowInfoList[i].x * this.pro.zoom +
        'px; top: ' +
        this.windowInfoList[i].y * this.pro.zoom +
        'px; width: ' +
        width +
        'px; height: ' +
        height +
        'px;"><div class="program"><canvas width="' +
        width +
        '" height="' +
        height +
        '"></canvas><canvas width="' +
        width +
        '" height="' +
        height +
        '"></canvas><canvas style="display:none;" width="' +
        width +
        '" height="' +
        height +
        '"></canvas></div></div>';
    }
    $('.screen .layer2').html(layer2_html);
    for (let i in this.windowInfoList) {

      if(this.windowInfoList[i]['type'] == 1 || this.windowInfoList[i]['type'] == 2){
        this.renderAniOne(i);
      } else {
        this.renderOne(i)
      }
    }
  }
  //播放效果只支持单行文本、多行文本
  renderAniOne(i) {
    let playitem = this.windowInfoList[i];
    let canvas = $('.draggable:eq(' + i + ') canvas')[0];
    let ctx = canvas.getContext('2d');
    switch (playitem['type'] + '') {
      case '1':
        this.renderAniTextpic(ctx, i, playitem);
        break;
      case '2':
        this.renderAniText(playitem['content'], ctx, i, playitem);
        break;
      default:
        break;
    }
    let border_canvas = $('.draggable:eq(' + i + ') canvas')[1];
    let border_ctx = border_canvas.getContext('2d');
    this.renderBorder(border_ctx, i, playitem);
  }
  renderAutoPage(i){
    let playitem = this.windowInfoList[i];
    let canvas = $('.draggable:eq(' + i + ') canvas')[0];
    let ctx = canvas.getContext('2d');
    switch (playitem['type'] + '') {
      case '1':
        this.renderTextpic(ctx, i, playitem);
        // this.renderLed(ctx, playitem['fontName'], playitem['fontColor']);
        break;
      case '2':
        this.renderText(playitem['content'], ctx, i, playitem);
        // this.renderLed(ctx, playitem['fontName'], playitem['fontColor']);
        break;
    }
    let border_canvas = $('.draggable:eq(' + i + ') canvas')[1];
    let border_ctx = border_canvas.getContext('2d');
    this.renderBorder(border_ctx, i, playitem);
  }
  renderOne(i) {
    let playitem = this.windowInfoList[i];
    let canvas = $('.draggable:eq(' + i + ') canvas')[0];
    let ctx = canvas.getContext('2d');
    switch (playitem['type'] + '') {
      case '1':
        this.renderTextpic(ctx, i, playitem);
        this.renderLed(ctx, playitem['fontName'], playitem['fontColor']);
        break;
      case '2':
        this.renderText(playitem['content'], ctx, i, playitem);
        this.renderLed(ctx, playitem['fontName'], playitem['fontColor']);
        break;
      case '3':
        this.renderTime(ctx, i, playitem);
        this.renderLed(ctx, playitem['fontName'], playitem['fontColor']);
        break;
      case '4':
        if (this.pageType != '1') {
          playitem['path'] = playitem['tableUrl'];
        }
        if (!playitem['path']) break;
        (function (playitem, obj, ctx) {
          let img = new Image();
          img.crossOrigin = 'Anonymous';
          img.onload = function () {
            let canvas_width = ctx.canvas.width / obj.pro['zoom'];
            let canvas_height = ctx.canvas.height / obj.pro['zoom'];
            if (playitem['imageHandleType'] == 'cut' && img.width > canvas_width && img.height > canvas_height) {
              ctx.drawImage(img, 0, 0, canvas_width, canvas_height, 0, 0, canvas_width, canvas_height);
            } else {
              ctx.drawImage(img, 0, 0, canvas_width, canvas_height);
            }
            obj.renderLed(ctx, playitem['fontName'], playitem['fontColor']);
            obj.partitions_helpdata[i]['currentpage'] = 1;
            obj.partitions_helpdata[i]['currentTotalpage'] = 1;
          };
          img.src = obj.getImageUrl(playitem['path']);
        })(playitem, this, ctx);
        break;
    }
    let border_canvas = $('.draggable:eq(' + i + ') canvas')[1];
    let border_ctx = border_canvas.getContext('2d');
    this.renderBorder(border_ctx, i, playitem);
  }
  /*> 更新素材列表 */
  updatePartitionNav() {
    let partition_nav_html = '';
    console.log(this.partitions_helpdata);
    console.log(this.windowInfoList);
    //详情不能拖动
    if (this.pageType != 2) {
      for (let i in this.windowInfoList) {
        const type = this.windowInfoList[i].type;
        const typeArr = ['', '单行文本', '多行文本', '时间窗', '表格'];
        partition_nav_html +=
          '<div class="partition_item sid' +
          this.partitions_helpdata[i]['sid'] +
          this.partitions_helpdata[i]['open'] +
          '"><span class="item_title">' +
          typeArr[type] +
          this.partitions_helpdata[i]['sid'];
        partition_nav_html += '<a class="delete_partition"></a>';
        partition_nav_html += '</span>';
        partition_nav_html += '</div>';
      }
    } else {
      for (let i in this.windowInfoList) {
        const type = this.windowInfoList[i].type;
        const typeArr = ['', '单行文本', '多行文本', '时间窗', '表格'];
        partition_nav_html +=
          '<div class="partition_item sid' +
          this.partitions_helpdata[i]['sid'] +
          this.partitions_helpdata[i]['open'] +
          '"><span class="item_title">' +
          typeArr[type] +
          this.partitions_helpdata[i]['sid'];
        partition_nav_html += '</span>';
        partition_nav_html += '</div>';
      }
    }

    $('.partition_nav').html(partition_nav_html);
    $('.partition_item').eq(this.partitionActiveID).addClass('active').siblings().removeClass('active');
    $('.partition_item.active li.active').addClass('selected');
    return this;
  }
  /*> 绘制屏幕尺寸 */
  drawScreenSize() {
    let c = document.getElementById('screen_size');
    let ctx = c.getContext('2d');
    let width = $('.screen')[0].offsetWidth;
    let height = $('.screen')[0].offsetHeight;
    if (width > 720 || height > 220) {
      $('#screen_size').attr('width', 1).attr('height', 1);
      return;
    }
    $('#screen_size').css({
      left: $('.screen')[0].offsetLeft,
      top: $('.screen')[0].offsetTop,
    });
    $('#screen_size')
      .attr('width', width + 20)
      .attr('height', height + 20);
    ctx.beginPath();
    if (width > 60) {
      ctx.moveTo(1, height + 5);
      ctx.lineTo(1, height + 15);
      ctx.moveTo(1, height + 10);
      ctx.lineTo(width / 2 - 20, height + 10);
      ctx.moveTo(width / 2 + 20, height + 10);
      ctx.lineTo(width, height + 10);
      ctx.moveTo(width, height + 5);
      ctx.lineTo(width, height + 15);
    }
    if (height > 60) {
      ctx.moveTo(width + 5, 1);
      ctx.lineTo(width + 15, 1);
      ctx.moveTo(width + 10, 1);
      ctx.lineTo(width + 10, height / 2 - 20);
      ctx.moveTo(width + 10, height / 2 + 20);
      ctx.lineTo(width + 10, height);
      ctx.moveTo(width + 5, height);
      ctx.lineTo(width + 15, height);
    }
    ctx.strokeStyle = 'red';
    ctx.stroke();
    let sw = this.pro.width;
    let sh = this.pro.height;
    ctx.fillStyle = 'rgba(255,0,0,1)';
    ctx.font = '13px arial';
    if (width > 60) {
      ctx.fillText(sw, width / 2 - `${sw}`.length * 3, height + 14);
      ctx.save();
    }
    if (height > 60) {
      ctx.rotate(-Math.PI / 2);
      ctx.fillText(sh, -height / 2 - `${sh}`.length * 3, width + 14);
    }
    ctx.restore();
  }
  /*> 创建窗口 */
  createWindow(form) {
    //手动创建窗口，页面类型置为新增
    this.pageType = 1;
    this.form = form;
    this.insertPartition();
    this.updatePartitionNav();
    this.updatePartitionBlock();
  }
  /*> 添加窗口 */
  insertPartition() {
    //设置窗口宽高
    let pro_w = this.pro.width;
    let pro_h = this.pro.height;
    this.form.width = pro_w;
    this.form.height = pro_h;
    this.form.x = '0';
    this.form.y = '0';
    //第一个窗口铺满
    if (this.windowInfoList.length == 0) {
      this.windowInfoList.push(this.form);
    } else {
      /*> autofill */
      let partitions_rect = [];
      let i;
      for (i in this.windowInfoList) {
        partitions_rect.push([this.windowInfoList[i]['x'], this.windowInfoList[i]['y'], this.windowInfoList[i]['width'], this.windowInfoList[i]['height']]);
      }
      let auto_rect = this.getAutoRect(partitions_rect, pro_w, pro_h);
      this.form.width = auto_rect[2];
      this.form.height = auto_rect[3];
      this.form.x = auto_rect[0];
      this.form.y = auto_rect[1];
      this.windowInfoList.push(this.form);
    }
    this.createPartitionTitle(); // 创建Title
    this.partitionActiveID = this.windowInfoList.length - 1; // 新分区激活
    return this;
  }
  /*> 获得自动矩形填充位置
   * _partitions_rect 坐标数组
   * _w 画布宽
   * _h 画布高
   */
  getAutoRect(_partitions_rect, _w, _h) {
    let i;
    let padding_right = _w;
    let rest;
    for (i = 0; i < _partitions_rect.length; i++) {
      if (padding_right > _w - _partitions_rect[i][0] - _partitions_rect[i][2]) {
        padding_right = _w - _partitions_rect[i][0] - _partitions_rect[i][2];
      }
    }
    if (padding_right > 0) {
      // 右边有空隙填右边
      rest = [_w - padding_right, 0, padding_right, _h];
    } else {
      let padding_bottom = _h;
      for (i = 0; i < _partitions_rect.length; i++) {
        if (padding_bottom > _h - _partitions_rect[i][1] - _partitions_rect[i][3]) {
          padding_bottom = _h - _partitions_rect[i][1] - _partitions_rect[i][3];
        }
      }
      if (padding_bottom > 0) {
        // 右边无空隙底部有空隙
        rest = [0, _h - padding_bottom, _w, padding_bottom];
      } else {
        // 右边和底部都无空隙
        padding_right = _w;
        padding_bottom = _h;
        for (i = 0; i < _partitions_rect.length; i++) {
          if (padding_bottom > _h - _partitions_rect[i][1] - _partitions_rect[i][3] && _h - _partitions_rect[i][1] - _partitions_rect[i][3] != 0) {
            padding_bottom = _h - _partitions_rect[i][1] - _partitions_rect[i][3];
          }
          if (_h - _partitions_rect[i][1] - _partitions_rect[i][3] == 0 && padding_right > _w - _partitions_rect[i][0] - _partitions_rect[i][2]) {
            padding_right = _w - _partitions_rect[i][0] - _partitions_rect[i][2];
          }
        }
        rest = [_w - padding_right, _h - padding_bottom, padding_right, padding_bottom];
      }
    }
    if (rest[0] >= 0 && rest[0] <= _w && rest[1] >= 0 && rest[1] <= _h && rest[2] > 0 && rest[0] + rest[2] <= _w && rest[3] > 0 && rest[1] + rest[3] <= _h) {
      return rest;
    } else {
      return [0, 0, 8, 8];
    }
  }
  /*> 添加分区Title */
  createPartitionTitle() {
    let i;
    let sid = this.partitions_helpdata.length + 1;
    let arr = [];
    for (i = 0; i < this.partitions_helpdata.length; i++) {
      arr.push(this.partitions_helpdata[i]['sid']);
    }
    for (i = 1; i <= arr.length; i++) {
      if ($.inArray(i, arr) == -1) {
        sid = i;
        break;
      }
    }
    this.partitions_helpdata.push({
      sid: sid,
      open: '',
      activeItemIndex: 0,
      currentpage: 1,
      currentTotalpage: 1,
    });
  }

  tokenization(_playitem) {
    //对于IE，bold用<strong>,而chrome和firefox用<b>,对于IE和firefox换行用<br>newline,而chrome用<div>newline</div>
    let i = 0,
      // tagpart = false,
      // tag = "",
      txt_obj = [];
    let face = [_playitem['fontName']];
    let color = [_playitem['fontColor']];
    let fontsize = [_playitem['showFontSize']];
    let bold = [_playitem['isBold']];
    let value = _playitem['content'];
    let italic = [_playitem['isItalic']];

    let str_len = value.length;
    for (i; i < str_len; i++) {
      txt_obj.push([value[i], face[face.length - 1], color[color.length - 1], fontsize[fontsize.length - 1], bold[bold.length - 1], italic[italic.length - 1]]);
    }
    // if (txt_obj.length > 0 && txt_obj[txt_obj.length - 1][0] == "\n")
    //   txt_obj.splice(txt_obj.length - 1, 1);
    return txt_obj;
  }
  renderLed(_ctx, _font, _color) {
    if (this.pro.zoom < 2) return;
    let imageData = _ctx.getImageData(0, 0, _ctx.canvas.width / this.pro.zoom, _ctx.canvas.height / this.pro.zoom);
    let data = imageData.data;
    // eslint-disable-next-line no-self-assign
    _ctx.canvas.width = _ctx.canvas.width;
    // let i, k, d;
    for (let i = 0; i <= _ctx.canvas.height / this.pro.zoom; i++) {
      for (let k = 0; k <= _ctx.canvas.width / this.pro.zoom; k++) {
        let d = ((i * _ctx.canvas.width) / this.pro.zoom + k) * 4;
        if (data[d] == undefined) continue;
        if (data[d + 3] == 0) continue;
        if (_font && _color) {
          if (data[d] == 0 && data[d + 1] == 0 && data[d + 2] == 0) continue;
          if (data[d + 3] < this.getfiltervaluebyfont(_font)) continue;
          _ctx.fillStyle = _color;
        } else {
          _ctx.fillStyle = this.getdisplaycolor(data[d], data[d + 1], data[d + 2]);
        }
        if (_ctx.fillStyle == '#191919') continue;
        if (this.pro.zoom == 8) {
          _ctx.fillRect(k * 8 + 2, i * 8 + 2, 6, 6);
        } else {
          _ctx.fillRect(k * this.pro.zoom + 1, i * this.pro.zoom + 1, this.pro.zoom - 1, this.pro.zoom - 1);
        }
      }
    }
  }
  //渲染单行文本动画
  renderAniTextpic(_ctx, _i, _playitem){
    let txt_obj = this.tokenization(_playitem);
    let lineheight = +_playitem['showFontSize'];
    let borderWidth = _playitem['frameMode'] == 0 ? 0 : 1;
    let left = borderWidth,
      top = lineheight - Math.ceil(lineheight / 8) + borderWidth,
      w = 0,
      page = 1,
      fontdata = [],
      line = [],
      s;

    if (lineheight < _ctx.canvas.height / this.pro.zoom) {
      top = lineheight - Math.ceil(lineheight / 8) + (_ctx.canvas.height / this.pro.zoom - lineheight) / 2;
    }
    fontdata[page] = [];
    for (s = 0; s < txt_obj.length; s++) {
      let space_font = 0;
      _ctx.font = (txt_obj[s][4] ? 'bold' : '') + ' ' + (txt_obj[s][5] ? 'italic' : '') + ' ' + parseInt(txt_obj[s][3]) + 'px ' + txt_obj[s][1];

      w = Math.ceil(_ctx.measureText(txt_obj[s][0]).width); // 取得文字宽度
      if(_playitem['actionType'] == 1 || _playitem['actionType'] == 5 || _playitem['actionType'] == 6 || _playitem['actionType'] == 7){
        if (
          left + w > _ctx.canvas.width / this.pro.zoom &&
          w <= _ctx.canvas.width / this.pro.zoom
        ) {
          left = space_font;
          page++; //分页
          fontdata[page] = [];
        }
      }
      line.push(s);
      fontdata[page][s] = { text: txt_obj[s], left: left, top: top };
      left += w + space_font;
    }
    lineheight = parseInt(_playitem['showFontSize']) + parseInt(_playitem['lineSpace']);
    let currentpage = 1;
    // eslint-disable-next-line no-unused-vars
    let row_num = 0;
    let curr_top = 0;
    let font_top = 0;
    if(_playitem['actionType'] == 1){
      this.verticalMove(_ctx,fontdata,currentpage,top,_playitem);
      currentpage++;
      this.animationArr[_i] = setInterval(() => {
        if(currentpage <= page){
          this.verticalMove(_ctx,fontdata,currentpage,top,_playitem);
          currentpage++;
        } else {
          clearInterval(this.animationArr[_i]);
          this.updateOnePartitionBlock(_i);
        }
      }, _playitem['holdTime'] * 1000 + 200)
    } else if(_playitem['actionType'] == 2 || _playitem['actionType'] == 3){
      //左移、连续左移
      let boxWidth = $(`.sid${this.windowInfoList[_i]['key']} .program`).width();
      let speed = this.speedMap[this.windowInfoList[_i]['actionSpeed']];
      this.animationArr[_i] = setInterval(() => {
        boxWidth -= speed;
        if(boxWidth <= left * -1){
          clearInterval(this.animationArr[_i]);
          this.updateOnePartitionBlock(_i);
        }
        _ctx.clearRect(0, 0, _ctx.canvas.width, _ctx.canvas.height);
        for (s in fontdata[currentpage]) {
          _ctx.font =
            (fontdata[currentpage][s]['text'][4] ? 'bold' : '') +
            ' ' +
            (fontdata[currentpage][s]['text'][5] ? 'italic' : '') +
            ' ' +
            parseInt(fontdata[currentpage][s]['text'][3]) +
            'px ' +
            fontdata[currentpage][s]['text'][1];
          _ctx.fillStyle = fontdata[currentpage][s]['text'][2];
          if (curr_top < fontdata[currentpage][s]['top']) {
            curr_top = fontdata[currentpage][s]['top'];
            row_num++;
            font_top = fontdata[currentpage][s]['top'];
          }
          _ctx.fillText(fontdata[currentpage][s]['text'][0], fontdata[currentpage][s]['left'] + boxWidth, font_top);
          if (_playitem['isUnderline']) {
            this.renderUnderline(_ctx, fontdata[currentpage][s]['left'] + boxWidth, font_top + 1, fontdata[currentpage][s]['left'] + boxWidth + parseInt(_playitem['showFontSize']), font_top + 1);
          }
        }
        this.renderLed(_ctx, _playitem['fontName'], _playitem['fontColor']);
      }, 60)
    } else if(_playitem['actionType'] == 4){  //右移
      let start = 0;
      let boxWidth = $(`.sid${this.windowInfoList[_i]['key']} .program`).width();
      let speed = this.speedMap[this.windowInfoList[_i]['actionSpeed']];
      this.animationArr[_i] = setInterval(() => {
        start += speed;
        if(start >= left + boxWidth){
          clearInterval(this.animationArr[_i]);
          this.updateOnePartitionBlock(_i);
        }
        let lastLeft = fontdata[currentpage][fontdata[currentpage].length - 1].left;
        _ctx.clearRect(0, 0, _ctx.canvas.width, _ctx.canvas.height);
        for (let s = fontdata[currentpage].length - 1;s >= 0; s--) {
          _ctx.font =
            (fontdata[currentpage][s]['text'][4] ? 'bold' : '') +
            ' ' +
            (fontdata[currentpage][s]['text'][5] ? 'italic' : '') +
            ' ' +
            parseInt(fontdata[currentpage][s]['text'][3]) +
            'px ' +
            fontdata[currentpage][s]['text'][1];
          _ctx.fillStyle = fontdata[currentpage][s]['text'][2];
          if (curr_top < fontdata[currentpage][s]['top']) {
            curr_top = fontdata[currentpage][s]['top'];
            row_num++;
            font_top = fontdata[currentpage][s]['top'];
          }
          _ctx.fillText(fontdata[currentpage][s]['text'][0], fontdata[currentpage][s]['left'] + start - lastLeft, font_top);
          if (_playitem['isUnderline']) {
            this.renderUnderline(_ctx, fontdata[currentpage][s]['left'] + start - lastLeft, font_top + 1, fontdata[currentpage][s]['left'] + start - lastLeft + parseInt(_playitem['showFontSize']), font_top + 1);
          }
        }
        this.renderLed(_ctx, _playitem['fontName'], _playitem['fontColor']);
      }, 60)
    } else if(_playitem['actionType'] == 5 || _playitem['actionType'] == 6){  //上移、连续上移
      let boxHeight = $(`.sid${this.windowInfoList[_i]['key']} .program`).height();
      let speed = this.speedMap[this.windowInfoList[_i]['actionSpeed']];
      this.animationArr[_i] = setInterval(() => {
        boxHeight -= speed;
        if(boxHeight <= _playitem['showFontSize'] * -1){
          if(currentpage < page){
            boxHeight = $(`.sid${this.windowInfoList[_i]['key']} .program`).height();
            this.verticalMove(_ctx,fontdata,currentpage,boxHeight,_playitem);
            currentpage++;
          } else{
            clearInterval(this.animationArr[_i]);
            this.updateOnePartitionBlock(_i);
          }
        }
        this.verticalMove(_ctx,fontdata,currentpage,boxHeight,_playitem)
      }, 60)
    } else if(_playitem['actionType'] == 7){ //下移
      let top = 0;
      let boxHeight = $(`.sid${this.windowInfoList[_i]['key']} .program`).height();
      let speed = this.speedMap[this.windowInfoList[_i]['actionSpeed']];
      this.animationArr[_i] = setInterval(() => {
        top += speed;
        if(top >= boxHeight){
          if(currentpage < page){
            top = 0;
            this.verticalMove(_ctx,fontdata,currentpage,top,_playitem);
            currentpage++;
          } else{
            clearInterval(this.animationArr[_i]);
            this.updateOnePartitionBlock(_i);
          }
        }
        this.verticalMove(_ctx,fontdata,currentpage,top,_playitem);
      }, 60)
    }
    
  }
  //单行文本上下移动
  verticalMove(_ctx,fontdata,currentpage,top,_playitem){
    _ctx.clearRect(0, 0, _ctx.canvas.width, _ctx.canvas.height);
    for (let s in fontdata[currentpage]) {
      _ctx.font =
        (fontdata[currentpage][s]['text'][4] ? 'bold' : '') +
        ' ' +
        (fontdata[currentpage][s]['text'][5] ? 'italic' : '') +
        ' ' +
        parseInt(fontdata[currentpage][s]['text'][3]) +
        'px ' +
        fontdata[currentpage][s]['text'][1];
      _ctx.fillStyle = fontdata[currentpage][s]['text'][2];
      let font_top = top;
      _ctx.fillText(fontdata[currentpage][s]['text'][0], fontdata[currentpage][s]['left'], font_top);
      if (_playitem['isUnderline']) {
        this.renderUnderline(_ctx, fontdata[currentpage][s]['left'], font_top + 1, fontdata[currentpage][s]['left'] + parseInt(_playitem['showFontSize']), font_top + 1);
      }
    }
    this.renderLed(_ctx, _playitem['fontName'], _playitem['fontColor']);
  }
  //多行文本水平移动
  multiHorMove(_ctx,fontdata,currentpage,left,font_top,_playitem,align_vertical,
    curr_top,row_num,lineheight,canvasHeight,row,row_total){
    _ctx.clearRect(0, 0, _ctx.canvas.width, _ctx.canvas.height);
    for (let s in fontdata[currentpage]) {
      if (!fontdata[currentpage][s]['text'][0] == '\n') {
        _ctx.font =
          (fontdata[currentpage][s]['text'][4] ? 'bold' : '') +
          ' ' +
          (fontdata[currentpage][s]['text'][5] ? 'italic' : '') +
          ' ' +
          parseInt(fontdata[currentpage][s]['text'][3]) +
          'px ' +
          fontdata[currentpage][s]['text'][1];
        _ctx.fillStyle = fontdata[currentpage][s]['text'][2];
        if (curr_top < fontdata[currentpage][s]['top']) {
          curr_top = fontdata[currentpage][s]['top'];
          row_num++;
          if (align_vertical == '1') {
            //font_top = (canvasHeight-row_total[currentpage]*lineheight) / 2 + (lineheight*row_num)-(Math.ceil(lineheight/2))+6;
            _ctx.textBaseline = 'middle';
            font_top = canvasHeight / 2 - (row_total[currentpage] - 1) * (lineheight / 2) + (row_num - 1) * lineheight;
            if (_playitem['fontName'] == '微软雅黑') font_top = font_top + 2;
          } else if (align_vertical == '2') {
            font_top = (row - (row_total[currentpage] - row_num)) * lineheight + Math.floor(((canvasHeight / lineheight) % 1) * lineheight) - Math.ceil(lineheight / 8);
          } else {
            font_top = fontdata[currentpage][s]['top'];
          }
        }
        _ctx.fillText(fontdata[currentpage][s]['text'][0], fontdata[currentpage][s]['left'] + left, font_top);
        if (_playitem['isUnderline']) {
          if (align_vertical == '1') {
            this.renderUnderline(
              _ctx,
              fontdata[currentpage][s]['left'] + left,
              font_top + parseInt(_playitem['showFontSize']) / 2,
              fontdata[currentpage][s]['left'] + left + parseInt(_playitem['showFontSize']),
              font_top + parseInt(_playitem['showFontSize']) / 2
            );
          } else {
            this.renderUnderline(_ctx, fontdata[currentpage][s]['left'] + left, font_top + 1, fontdata[currentpage][s]['left'] + left + parseInt(_playitem['showFontSize']), font_top + 1);
          }
        }
      }
    }
    this.renderLed(_ctx, _playitem['fontName'], _playitem['fontColor']);
  }
  //多行文本上下移动
  multiVerMove(_ctx,fontdata,currentpage,top,font_top,_playitem,text_align,align_vertical,
    curr_top,row_num,lineheight,canvasHeight,row,row_total){
    _ctx.clearRect(0, 0, _ctx.canvas.width, _ctx.canvas.height);
    for (let s in fontdata[currentpage]) {
      if (!fontdata[currentpage][s]['text'][0] == '\n') {
        _ctx.font =
          (fontdata[currentpage][s]['text'][4] ? 'bold' : '') +
          ' ' +
          (fontdata[currentpage][s]['text'][5] ? 'italic' : '') +
          ' ' +
          parseInt(fontdata[currentpage][s]['text'][3]) +
          'px ' +
          fontdata[currentpage][s]['text'][1];
        _ctx.fillStyle = fontdata[currentpage][s]['text'][2];
        if (curr_top < fontdata[currentpage][s]['top']) {
          curr_top = fontdata[currentpage][s]['top'];
          row_num++;
          if (align_vertical == '1') {
            //font_top = (canvasHeight-row_total[currentpage]*lineheight) / 2 + (lineheight*row_num)-(Math.ceil(lineheight/2))+6;
            _ctx.textBaseline = 'middle';
            font_top = canvasHeight / 2 - (row_total[currentpage] - 1) * (lineheight / 2) + (row_num - 1) * lineheight;
            if (_playitem['fontName'] == '微软雅黑') font_top = font_top + 2;
          } else if (align_vertical == '2') {
            font_top = (row - (row_total[currentpage] - row_num)) * lineheight + Math.floor(((canvasHeight / lineheight) % 1) * lineheight) - Math.ceil(lineheight / 8);
          } else {
            font_top = fontdata[currentpage][s]['top'];
          }
        }
        _ctx.fillText(fontdata[currentpage][s]['text'][0], fontdata[currentpage][s]['left'], font_top + top);
        if (_playitem['isUnderline']) {
          if (align_vertical == '1') {
            this.renderUnderline(
              _ctx,
              fontdata[currentpage][s]['left'],
              font_top + parseInt(_playitem['showFontSize']) / 2,
              fontdata[currentpage][s]['left'] + parseInt(_playitem['showFontSize']),
              font_top + parseInt(_playitem['showFontSize']) / 2
            );
          } else {
            this.renderUnderline(_ctx, fontdata[currentpage][s]['left'], font_top + 1 + top, fontdata[currentpage][s]['left'] + parseInt(_playitem['showFontSize']), font_top + 1 + top);
          }
        }
        if (text_align == '2') {
          if (fontdata[currentpage][s]['text'][0] == '\n' && fontdata[currentpage][s - 1] != undefined) {
            _ctx.fillText(
              fontdata[currentpage][s - 1]['text'][0],
              fontdata[currentpage][s - 1]['left'] - parseInt(fontdata[currentpage][s - 1]['text'][3]),
              fontdata[currentpage][s - 1]['top'] + top
            );
          }
          if (_playitem['isUnderline']) {
            if (align_vertical == '1') {
              this.renderUnderline(
                _ctx,
                fontdata[currentpage][s]['left'],
                font_top + parseInt(_playitem['showFontSize']) / 2 + top,
                fontdata[currentpage][s]['left'] + parseInt(_playitem['showFontSize']),
                font_top + parseInt(_playitem['showFontSize']) / 2 + top
              );
            } else {
              this.renderUnderline(_ctx, fontdata[currentpage][s]['left'], font_top + 1 + top, fontdata[currentpage][s]['left'] + parseInt(_playitem['showFontSize']), font_top + 1 + top);
            }
          }
        }
      }
    }
    this.renderLed(_ctx, _playitem['fontName'], _playitem['fontColor']);
  }
  //渲染单行文本
  renderTextpic(_ctx, _i, _playitem, fill) {
    fill = fill == undefined ? true : fill;
    if (_playitem.content.length == 0) {
      this.partitions_helpdata[_i]['currentpage'] = 1;
      this.partitions_helpdata[_i]['currentTotalpage'] = 1;
      return;
    }
    let txt_obj = this.tokenization(_playitem);
    let lineheight = +_playitem['showFontSize'];
    let borderWidth = _playitem['frameMode'] == 0 ? 0 : 1;
    // for (s = 0; s < txt_obj.length; s++) {
    //   if (lineheight < txt_obj[s][3]) {
    //     lineheight = +txt_obj[s][3];
    //   }
    // }
    //单行文本左对齐，上下居中
    // var text_align = 'left';
    // var align_vertical = 'center';
    let left = borderWidth,
      top = lineheight - Math.ceil(lineheight / 8) + borderWidth,
      w = 0,
      page = 1,
      fontdata = [],
      // space,
      line = [],
      // l,
      s;

    let row_total = [];
    row_total[page] = 1;
    if (lineheight < _ctx.canvas.height / this.pro.zoom) {
      top = lineheight - Math.ceil(lineheight / 8) + (_ctx.canvas.height / this.pro.zoom - lineheight) / 2;
    }

    fontdata[page] = [];
    for (s = 0; s < txt_obj.length; s++) {
      let space_font = 0;
      _ctx.font = (txt_obj[s][4] ? 'bold' : '') + ' ' + (txt_obj[s][5] ? 'italic' : '') + ' ' + parseInt(txt_obj[s][3]) + 'px ' + txt_obj[s][1];

      w = Math.ceil(_ctx.measureText(txt_obj[s][0]).width); // 取得文字宽度
      //换行
      if (
        // txt_obj[s][0] == "\n" ||
        left + w > _ctx.canvas.width / this.pro.zoom &&
        w <= _ctx.canvas.width / this.pro.zoom
      ) {
        //换行/页(连续移动)
        // if (
        //   txt_obj[s][0] != "\n" &&
        //   left < _ctx.canvas.width / this.pro["zoom"]
        // ) {
        //   left = space_font;
        // }
        left = space_font;
        page++; //分页
        fontdata[page] = [];
      }
      line.push(s);
      fontdata[page][s] = { text: txt_obj[s], left: left, top: top };
      left += w + space_font;
      if (fill) this.partitions_helpdata[_i]['currentTotalpage'] = page; // 总页数
    }
    if (!fill) return page;
    lineheight = parseInt(_playitem['showFontSize']) + parseInt(_playitem['lineSpace']);
    let currentpage = this.partitions_helpdata[_i]['currentpage'];
    // eslint-disable-next-line no-unused-vars
    let row_num = 0;
    let curr_top = 0;
    let font_top = 0;
    // var canvasHeight = parseInt(_ctx.canvas.height / this.pro.zoom);
    // var row = Math.floor(canvasHeight / lineheight);
    // if (_playitem["vertical"] == "1") {
    //   _ctx.translate(0, 0);
    //   _ctx.rotate((270 * Math.PI) / 180);
    // }
    for (s in fontdata[currentpage]) {
      // if (!fontdata[currentpage][s]['text'][0] == '\n') {
        _ctx.font =
          (fontdata[currentpage][s]['text'][4] ? 'bold' : '') +
          ' ' +
          (fontdata[currentpage][s]['text'][5] ? 'italic' : '') +
          ' ' +
          parseInt(fontdata[currentpage][s]['text'][3]) +
          'px ' +
          fontdata[currentpage][s]['text'][1];
        _ctx.fillStyle = fontdata[currentpage][s]['text'][2];
        if (curr_top < fontdata[currentpage][s]['top']) {
          curr_top = fontdata[currentpage][s]['top'];
          row_num++;
          font_top = fontdata[currentpage][s]['top'];
        }
        _ctx.fillText(fontdata[currentpage][s]['text'][0], fontdata[currentpage][s]['left'], font_top);
        if (_playitem['isUnderline']) {
          this.renderUnderline(_ctx, fontdata[currentpage][s]['left'], font_top + 1, fontdata[currentpage][s]['left'] + parseInt(_playitem['showFontSize']), font_top + 1);
        }
      // }
    }
  }
  
  //渲染多行文本动画
  renderAniText(_txt, _ctx, _i, _playitem){
    _ctx.font = (_playitem.isBold ? 'bold' : '') + ' ' + (_playitem.isItalic ? 'italic' : '') + ' ' + _playitem.showFontSize + 'px ' + _playitem.fontName;
    if (this.pro['zoom'] < 2) {
      _ctx.fillStyle = _playitem['fontColor'];
    } else {
      _ctx.fillStyle = '#ff0000';
    }
    let page = 0;
    let lineheight = +_playitem['showFontSize'];
    let borderWidth = _playitem['frameMode'] == 0 ? 0 : 1;
    let text_align = _playitem['alignX'];
    let align_vertical = _playitem['alignY'];
    let left, top, w, s;
    let currentPage = 1;
    //根据eq的显示效果调整顶距离
    let topLine = _playitem.lineSpace == 0 ? 0 : parseInt(eqLed[this.fontRelation[_playitem.fontName]][_playitem['fontSize']]['topLine']);
    let addLineSpace = _playitem.lineSpace == 0 ? 0 : parseInt(eqLed[this.fontRelation[_playitem.fontName]][_playitem['fontSize']]['addLineSpace']);
    var space_font = 0;
    left = borderWidth;
      top = topLine + lineheight - Math.ceil(lineheight / 8) + borderWidth;
      w = 0;
      page = 1;
      let fontdata = [];
      let space;
      let line = [];
      let l;
      s;
      let row_total = [];
      row_total[page] = 1;
      fontdata[page] = [];
      let txt_obj = this.tokenization(_playitem);
      for (s = 0; s < txt_obj.length; s++) {
        space_font = 0;
        _ctx.font = (txt_obj[s][4] ? 'bold' : '') + ' ' + (txt_obj[s][5] ? 'italic' : '') + ' ' + parseInt(txt_obj[s][3]) + 'px ' + txt_obj[s][1];
        w = txt_obj[s][0] == '\n' ? 0 : Math.ceil(_ctx.measureText(txt_obj[s][0]).width); // 取得文字宽度
        if (txt_obj[s][0] == '\n' || (left + w > _ctx.canvas.width / this.pro['zoom'] && w <= _ctx.canvas.width / this.pro['zoom'])) {
          space = _ctx.canvas.width / this.pro['zoom'] - left;
          for (l in line) {
            if (text_align == '1') {
              fontdata[page][line[l]]['left'] += parseInt((space + space_font) / 2);
            } else if (text_align == '2') {
              fontdata[page][line[l]]['left'] += parseInt(space + space_font);
              if (fontdata[page][fontdata[page].length] == undefined) {
                fontdata[page][fontdata[page].length - 1]['left'] = _ctx.canvas.width / this.pro['zoom'] - w;
              }
            }
          }
          line = [];
          left = borderWidth;
          if (top + Math.ceil(lineheight / 8) + lineheight + parseInt(_playitem['lineSpace']) + addLineSpace > _ctx.canvas.height / this.pro['zoom'] - borderWidth) {
            //分页
            page++;
            fontdata[page] = [];
            top = topLine + lineheight - Math.ceil(lineheight / 8) + borderWidth;
            row_total[page] = 1;
          } else {
            top += lineheight + parseInt(_playitem['lineSpace']) + addLineSpace;
            row_total[page]++;
            if (txt_obj[s][0] == '\n') space_font = 0;
          }
        }
        line.push(s);
        fontdata[page][s] = { text: txt_obj[s], left: left, top: top };
        left += w + space_font;
      }
      space = _ctx.canvas.width / this.pro['zoom'] - left;
      for (l in line) {
        if (text_align == '1') {
          fontdata[page][line[l]]['left'] += parseInt((space + space_font) / 2);
        } else if (text_align == '2') {
          fontdata[page][line[l]]['left'] += parseInt(space + space_font);
          if (fontdata[page][fontdata[page].length] == undefined) {
            fontdata[page][fontdata[page].length - 1]['left'] = _ctx.canvas.width / this.pro['zoom'] - w;
          }
        }
      }
      lineheight = parseInt(_playitem['showFontSize']) + parseInt(_playitem['lineSpace']) + addLineSpace;
      // var currentpage = this.partitions_helpdata[_i]['currentpage'];
      let currentpage = 1;
      let row_num = 0;
      let curr_top = 0;
      let font_top = 0;
      let canvasHeight = parseInt(_ctx.canvas.height / this.pro['zoom']);
      let row = Math.floor(canvasHeight / lineheight);
      //无动画效果
      if(_playitem['actionType'] == 1){
        this.renderAutoPageText(_ctx, fontdata, currentpage, curr_top, row_num, align_vertical, text_align,
          font_top, canvasHeight, row_total, _playitem, lineheight, row);
        currentpage++;
        this.animationArr[_i] = setInterval(() => {
          if(currentpage <= page){
            this.renderAutoPageText(_ctx, fontdata, currentpage, curr_top, row_num, align_vertical, text_align,
              font_top, canvasHeight, row_total, _playitem, lineheight, row);
            currentpage++;
          } else {
            clearInterval(this.animationArr[_i]);
            this.updateOnePartitionBlock(_i);
          }
        }, _playitem['holdTime'] * 1000 + 200)
      } else if(_playitem['actionType'] == 2 || _playitem['actionType'] == 3){ //左移、连续左移
        let boxWidth = $(`.sid${this.windowInfoList[_i]['key']} .program`).width();
        let sumWidth = $(`.sid${this.windowInfoList[_i]['key']} .program`).width();
        let speed = this.speedMap[this.windowInfoList[_i]['actionSpeed']];
        this.animationArr[_i] = setInterval(() => {
          boxWidth -= speed;
          if(boxWidth <= sumWidth * -1){
            if(currentpage < page){
              boxWidth = $(`.sid${this.windowInfoList[_i]['key']} .program`).width();
              this.multiHorMove(_ctx,fontdata,currentpage,boxWidth,font_top,_playitem,align_vertical,
                curr_top,row_num,lineheight,canvasHeight,row,row_total)
              currentpage++;
            } else{
              clearInterval(this.animationArr[_i]);
              this.updateOnePartitionBlock(_i);
            }
          } else{
            this.multiHorMove(_ctx,fontdata,currentpage,boxWidth,font_top,_playitem,align_vertical,
              curr_top,row_num,lineheight,canvasHeight,row,row_total)
          }
        }, 60)
      } else if(_playitem['actionType'] == 4){ //右移
        let boxWidth = $(`.sid${this.windowInfoList[_i]['key']} .program`).width();
        let left = boxWidth * -1;
        let speed = this.speedMap[this.windowInfoList[_i]['actionSpeed']];
        this.animationArr[_i] = setInterval(() => {
          left += speed;
          if(left >= boxWidth){
            if(currentpage < page){
              left = boxWidth * -1;
              this.multiHorMove(_ctx,fontdata,currentpage,boxWidth,font_top,_playitem,align_vertical,
                curr_top,row_num,lineheight,canvasHeight,row,row_total)
              currentpage++;
            } else{
              clearInterval(this.animationArr[_i]);
              this.updateOnePartitionBlock(_i);
            }
          }else{
            this.multiHorMove(_ctx,fontdata,currentpage,left,font_top,_playitem,align_vertical,
              curr_top,row_num,lineheight,canvasHeight,row,row_total)
          }
        }, 60)
      } else if(_playitem['actionType'] == 5 || _playitem['actionType'] == 6){  //上移、连续上移
        let boxHeight = $(`.sid${this.windowInfoList[_i]['key']} .program`).height();
        let sumHeight = $(`.sid${this.windowInfoList[_i]['key']} .program`).height();
        let speed = this.speedMap[this.windowInfoList[_i]['actionSpeed']];
        this.animationArr[_i] = setInterval(() => {
          boxHeight -= speed;
          if(boxHeight <= sumHeight * -1){
            if(currentpage < page){
              boxHeight = $(`.sid${this.windowInfoList[_i]['key']} .program`).height();
              this.multiVerMove(_ctx,fontdata,currentpage,boxHeight,_playitem,text_align,align_vertical,
                curr_top,row_num,lineheight,canvasHeight,row,row_total)
              currentpage++;
            } else{
              clearInterval(this.animationArr[_i]);
              this.updateOnePartitionBlock(_i);
            }
          } else{
            this.multiVerMove(_ctx,fontdata,currentpage,boxHeight,font_top,_playitem,text_align,align_vertical,
              curr_top,row_num,lineheight,canvasHeight,row,row_total)
          }
        }, 60)
      } else if(_playitem['actionType'] == 7){ //下移
        let boxHeight = $(`.sid${this.windowInfoList[_i]['key']} .program`).height();
        let top = boxHeight * -1;
        let speed = this.speedMap[this.windowInfoList[_i]['actionSpeed']];
        this.animationArr[_i] = setInterval(() => {
          top += speed;
          if(top >= boxHeight){
            if(currentpage < page){
              top = boxHeight * -1;
              this.multiVerMove(_ctx,fontdata,currentpage,top,font_top,_playitem,text_align,align_vertical,
                curr_top,row_num,lineheight,canvasHeight,row,row_total)
              currentpage++;
            } else{
              clearInterval(this.animationArr[_i]);
              this.updateOnePartitionBlock(_i);
            }
          }else{
            this.multiVerMove(_ctx,fontdata,currentpage,top,font_top,_playitem,text_align,align_vertical,
              curr_top,row_num,lineheight,canvasHeight,row,row_total)
          }
        }, 60)
      }
  }
  //渲染多行文本
  renderText(_txt, _ctx, _i, _playitem, fill) {
    if (_txt.length == 0) {
      this.partitions_helpdata[_i]['currentpage'] = 1;
      this.partitions_helpdata[_i]['currentTotalpage'] = 1;
      return;
    }
    _ctx.font = (_playitem.isBold ? 'bold' : '') + ' ' + (_playitem.isItalic ? 'italic' : '') + ' ' + _playitem.showFontSize + 'px ' + _playitem.fontName;
    if (this.pro['zoom'] < 2) {
      _ctx.fillStyle = _playitem['fontColor'];
    } else {
      _ctx.fillStyle = '#ff0000';
    }
    let page = 0;
    page = this.renderTextRotate270(_txt, _ctx, _i, _playitem, fill);
    if (!fill) return page;
  }
  //渲染时间窗
  renderTime(_ctx, _i, _playitem, fill) {
    _playitem['alignX'] = 1;
    _playitem['alignY'] = 1;
    let timeObj = {};
    timeObj.today = new Date();
    if (_playitem.showYear) {
      if (_playitem.yearStyle == 0) {
        timeObj.year = timeObj.today.getFullYear();
      } else {
        timeObj.year = timeObj.today.getFullYear().toString().substr(2, 4);
      }
    } else {
      timeObj.year = '';
    }
    if (_playitem.showMonth) {
      timeObj.month = (timeObj.today.getMonth() + 1).toString().length == 1 ? '0' + (timeObj.today.getMonth() + 1) : timeObj.today.getMonth() + 1;
    } else {
      timeObj.month = '';
    }
    if (_playitem.showDay) {
      timeObj.date = timeObj.today.getDate().toString().length == 1 ? '0' + timeObj.today.getDate() : timeObj.today.getDate();
    } else {
      timeObj.date = '';
    }

    timeObj.day = timeObj.today.getDay();

    if (_playitem.showHour) {
      timeObj.hour = timeObj.today.getHours().toString().length == 1 ? '0' + timeObj.today.getHours() : timeObj.today.getHours();
    } else {
      timeObj.hour = '';
    }
    if (_playitem.showMinute) {
      timeObj.minute = timeObj.today.getMinutes().toString().length == 1 ? '0' + timeObj.today.getMinutes() : timeObj.today.getMinutes();
    } else {
      timeObj.minute = '';
    }
    if (_playitem.showSecond) {
      timeObj.second = timeObj.today.getSeconds().toString().length == 1 ? '0' + timeObj.today.getSeconds() : timeObj.today.getSeconds();
    } else {
      timeObj.second = '';
    }
    let year, month, date, hour, minute, second, week;
    if (_playitem.dateStyle == 0) {
      year = _playitem.showYear ? timeObj.year + '-' : '';
      month = _playitem.showMonth ? timeObj.month + '-' : '';
      date = _playitem.showDay ? timeObj.date : '';
      hour = _playitem.showHour ? timeObj.hour + ':' : '';
      minute = _playitem.showMinute ? timeObj.minute + ':' : '';
      second = _playitem.showSecond ? timeObj.second : '';
      week = _playitem.showWeek ? `${this.dayList[timeObj.day]} ` : '';
    } else if (_playitem.dateStyle == 1) {
      year = _playitem.showYear ? timeObj.year + '/' : '';
      month = _playitem.showMonth ? timeObj.month + '/' : '';
      date = _playitem.showDay ? timeObj.date : '';
      hour = _playitem.showHour ? timeObj.hour + ':' : '';
      minute = _playitem.showMinute ? timeObj.minute + ':' : '';
      second = _playitem.showSecond ? timeObj.second : '';
      week = _playitem.showWeek ? `${this.dayList[timeObj.day]}` : '';
    } else {
      year = _playitem.showYear ? timeObj.year + '年' : '';
      month = _playitem.showMonth ? timeObj.month + '月' : '';
      date = _playitem.showDay ? timeObj.date + '日' : '';
      hour = _playitem.showHour ? timeObj.hour + '时' : '';
      minute = _playitem.showMinute ? timeObj.minute + '分' : '';
      second = _playitem.showSecond ? timeObj.second + '秒' : '';
      week = _playitem.showWeek ? `${this.dayList[timeObj.day]}` : '';
    }
    let str = '';
    //单行显示
    if (_playitem.isMoreLine == 0) {
      str = `${year}${month}${date} ${week}${hour}${minute}${second}`;
    } else {
      if (week) {
        str = `${year}${month}${date}\n${week}\n${hour}${minute}${second}`;
      } else {
        str = `${year}${month}${date}\n${hour}${minute}${second}`;
      }
    }
    let newStr = '';
    for (let i = 0; i < str.length; i++) {
      if ((str[i] == '-' || str[i] == ':' || str[i] == '/') && (str[i + 1] == undefined || str[i + 1] == '' || str[i + 1] == ' ')) {
        continue;
      }
      newStr += str[i];
    }
    _playitem.content = newStr;
    if (newStr.length == 0) {
      this.partitions_helpdata[_i]['currentpage'] = 1;
      this.partitions_helpdata[_i]['currentTotalpage'] = 1;
      return;
    }
    _ctx.font = (_playitem.isBold ? 'bold' : '') + ' ' + (_playitem.isItalic ? 'italic' : '') + ' ' + _playitem.showFontSize + 'px ' + _playitem.fontName;
    if (this.pro['zoom'] < 2) {
      _ctx.fillStyle = _playitem['fontColor'];
    } else {
      _ctx.fillStyle = '#ff0000';
    }
    let page = 0;
    page = this.renderTimeWindow(newStr, _ctx, _i, _playitem, fill);
    if (!fill) return page;
  }
  renderUnderline(_ctx, startX, startY, endX, endY) {
    _ctx.beginPath();
    _ctx.strokeStyle = '#ff0000';
    _ctx.lineWidth = 1;
    _ctx.moveTo(startX, startY);
    _ctx.lineTo(endX, endY);
    _ctx.stroke();
  }
  renderBorder(_ctx, _i, _playitem) {
    let start,
      width = _ctx.canvas.width / this.pro['zoom'],
      height = _ctx.canvas.height / this.pro['zoom'],
      type,
      color;
    switch (parseInt(_playitem['frameMode'])) {
      case 0:
        return; //无边框
      case 1:
        type = 1;
        color = '#FF0000';
        break; //红4点
      case 2:
        type = 2;
        color = '#FF0000';
        break; //红4点-2点
      case 3:
        type = 3;
        color = '#FF0000';
        break; //红4点2列
      case 4:
        type = 4;
        color = '#FF0000';
        break; //红4点-2点2列
      case 5:
        type = 5;
        color = '#FF0000';
        break; //3列包围
    }
    clearInterval(this.borderInterval[_i]);
    this.borderInterval[_i] = setInterval(() => {
      // eslint-disable-next-line no-self-assign
      _ctx.canvas.width = _ctx.canvas.width;
      _ctx.strokeStyle = color;
      _ctx.beginPath(); //丢弃原有路径开始一条新路径
      if (type == 1) {
        start = parseInt(new Date().getTime() / 100) % 8;
        for (let i = 0; i <= width; i += 8) {
          _ctx.moveTo(start + i - 5, 0);
          _ctx.lineTo(start + i, 0);
          _ctx.moveTo(width - i - 2 - start, height);
          _ctx.lineTo(width - i + 3 - start, height);
        }
        for (let j = 0; j <= height; j += 8) {
          _ctx.moveTo(width, start + j - 3);
          _ctx.lineTo(width, start + j + 2);
          _ctx.moveTo(0, j + 1 - start);
          _ctx.lineTo(0, j + 6 - start);
        }
      } else if (type == 2) {
        start = parseInt(new Date().getTime() / 100) % 13;
        for (let i = 0; i <= width; i += 13) {
          _ctx.moveTo(start + i - 5, 0);
          _ctx.lineTo(start + i, 0);
          _ctx.moveTo(start + i - 10, 0);
          _ctx.lineTo(start + i - 8, 0);
          _ctx.moveTo(width - i - 2 - start, height);
          _ctx.lineTo(width - i + 3 - start, height);
          _ctx.moveTo(width - i - 7 - start, height);
          _ctx.lineTo(width - i - 5 - start, height);
        }
        for (let j = 0; j <= height; j += 13) {
          _ctx.moveTo(width, start + j - 3);
          _ctx.lineTo(width, start + j + 2);
          _ctx.moveTo(width, start + j - 9);
          _ctx.lineTo(width, start + j - 7);
          _ctx.moveTo(0, j + 1 - start);
          _ctx.lineTo(0, j + 6 - start);
          _ctx.moveTo(0, j - 5 - start);
          _ctx.lineTo(0, j - 3 - start);
        }
      }
      _ctx.stroke(); //绘制路径
      this.renderLed(_ctx);
    }, 100);
  }
  /*> 聚焦分区 */
  focusPartition(_pid) {
    $('.partition_item').eq(_pid).addClass('active open').siblings().removeClass('active');
    this.partitions_helpdata[_pid]['open'] = ' open';
    $('.draggable').eq(_pid).addClass('active').siblings().removeClass('active'); // 展示区聚焦
    this.partitionActiveID = _pid;
    return this;
  }
  /*> 分区-重叠验证 */
  validation() {
    $('.draggable').removeClass('repeat');
    this.partitionStacked = false;
    let n = this.windowInfoList.length;
    for (var i = 0; i < n; i++) {
      let l = +this.windowInfoList[i]['x'];
      let t = +this.windowInfoList[i]['y'];
      let w = +this.windowInfoList[i]['width'];
      let h = +this.windowInfoList[i]['height'];

      for (var j = 0; j < n; j++) {
        let sl = +this.windowInfoList[j]['x'];
        let st = +this.windowInfoList[j]['y'];
        let sw = +this.windowInfoList[j]['width'];
        let sh = +this.windowInfoList[j]['height'];
        if (i != j) {
          if ((t + h > st && t + h <= st + sh) || (t + h > st + sh && t < st + sh)) {
            if ((l + w > sl && l + w <= sl + sw) || (l + w > sl + sw && l < sl + sw)) {
              $('.draggable').eq(i).addClass('repeat');
              $('.draggable').eq(j).addClass('repeat');
              this.partitionStacked = true;
            }
          }
        }
      }
    }
  }
  /*> 删除分区 */
  removePartition(_i) {
    let i;
    let partitions = [];
    let partitions_helpdata = [];
    for (i = 0; i < this.windowInfoList.length; i++) {
      if (i != _i) {
        partitions.push(this.windowInfoList[i]);
        partitions_helpdata.push(this.partitions_helpdata[i]);
      }
    }
    this.windowInfoList = partitions;
    console.log(this.windowInfoList);
    this.partitions_helpdata = partitions_helpdata;
  }
  getfiltervaluebyfont(_font) {
    let v;
    switch (_font) {
      case '黑体':
        v = 20;
        break; //黑体
      case '宋体':
        v = 65;
        break; //宋体
      case '楷体':
        v = 80;
        break; //楷体
      case '微软雅黑':
        v = 116;
        break; //微软雅黑
      default:
        v = 80;
        break;
    }
    return v;
  }
  getdisplaycolor(_r, _g, _b) {
    // var type_color = +this.pro["type_color"]; //基色
    //var gray = +this.pro["gray"]; //灰度
    let gray = 7;

    // if (type_color == 1) {
    //   //单基色
    //   _g = 0;
    //   _b = 0;
    // } else if (type_color == 2) {
    //   //双基色
    //   _b = 0;
    // }
    _g = 0;
    _b = 0;

    switch (gray) {
      case 0:
        _r = _r >= 128 ? 255 : 0;
        _g = _g > 128 ? 255 : 0;
        _b = _b > 128 ? 255 : 0;
        break;
      case 1:
        _r = _r >= 192 ? 255 : _r & 192;
        _g = _g > 192 ? 255 : _g & 192;
        _b = _b > 192 ? 255 : _b & 192;
        break;
      case 2:
        _r = _r >= 224 ? 255 : _r & 224;
        _g = _g > 224 ? 255 : _g & 224;
        _b = _b > 224 ? 255 : _b & 224;
        break;
      case 3:
        _r = _r >= 240 ? 255 : _r & 240;
        _g = _g > 240 ? 255 : _g & 240;
        _b = _b > 240 ? 255 : _b & 240;
        break;
      case 4:
        _r = _r >= 248 ? 255 : _r & 248;
        _g = _g > 248 ? 255 : _g & 248;
        _b = _b > 248 ? 255 : _b & 248;
        break;
      case 5:
        _r = _r >= 252 ? 255 : _r & 252;
        _g = _g > 252 ? 255 : _g & 252;
        _b = _b > 252 ? 255 : _b & 252;
        break;
      case 6:
        _r = _r & 254;
        _g = _g & 254;
        _b = _b & 254;
        break;
    }
    return 'rgb(' + _r + ',' + _g + ',' + _b + ')';
  }
  renderAutoPageText(_ctx, fontdata, currentpage, curr_top, row_num, align_vertical, text_align,
    font_top, canvasHeight, row_total, _playitem, lineheight, row){
    _ctx.clearRect(0, 0, _ctx.canvas.width, _ctx.canvas.height);
    for (let s in fontdata[currentpage]) {
      if (!fontdata[currentpage][s]['text'][0] == '\n') {
        _ctx.font =
          (fontdata[currentpage][s]['text'][4] ? 'bold' : '') +
          ' ' +
          (fontdata[currentpage][s]['text'][5] ? 'italic' : '') +
          ' ' +
          parseInt(fontdata[currentpage][s]['text'][3]) +
          'px ' +
          fontdata[currentpage][s]['text'][1];
        _ctx.fillStyle = fontdata[currentpage][s]['text'][2];
        if (curr_top < fontdata[currentpage][s]['top']) {
          curr_top = fontdata[currentpage][s]['top'];
          row_num++;
          if (align_vertical == '1') {
            //font_top = (canvasHeight-row_total[currentpage]*lineheight) / 2 + (lineheight*row_num)-(Math.ceil(lineheight/2))+6;
            _ctx.textBaseline = 'middle';
            font_top = canvasHeight / 2 - (row_total[currentpage] - 1) * (lineheight / 2) + (row_num - 1) * lineheight;
            if (_playitem['fontName'] == '微软雅黑') font_top = font_top + 2;
          } else if (align_vertical == '2') {
            font_top = (row - (row_total[currentpage] - row_num)) * lineheight + Math.floor(((canvasHeight / lineheight) % 1) * lineheight) - Math.ceil(lineheight / 8);
          } else {
            font_top = fontdata[currentpage][s]['top'];
          }
        }
        _ctx.fillText(fontdata[currentpage][s]['text'][0], fontdata[currentpage][s]['left'], font_top);
        if (_playitem['isUnderline']) {
          if (align_vertical == '1') {
            this.renderUnderline(
              _ctx,
              fontdata[currentpage][s]['left'],
              font_top + parseInt(_playitem['showFontSize']) / 2,
              fontdata[currentpage][s]['left'] + parseInt(_playitem['showFontSize']),
              font_top + parseInt(_playitem['showFontSize']) / 2
            );
          } else {
            this.renderUnderline(_ctx, fontdata[currentpage][s]['left'], font_top + 1, fontdata[currentpage][s]['left'] + parseInt(_playitem['showFontSize']), font_top + 1);
          }
        }
        if (text_align == '2') {
          if (fontdata[currentpage][s]['text'][0] == '\n' && fontdata[currentpage][s - 1] != undefined) {
            _ctx.fillText(
              fontdata[currentpage][s - 1]['text'][0],
              fontdata[currentpage][s - 1]['left'] - parseInt(fontdata[currentpage][s - 1]['text'][3]),
              fontdata[currentpage][s - 1]['top']
            );
          }
          if (_playitem['isUnderline']) {
            if (align_vertical == '1') {
              this.renderUnderline(
                _ctx,
                fontdata[currentpage][s]['left'],
                font_top + parseInt(_playitem['showFontSize']) / 2,
                fontdata[currentpage][s]['left'] + parseInt(_playitem['showFontSize']),
                font_top + parseInt(_playitem['showFontSize']) / 2
              );
            } else {
              this.renderUnderline(_ctx, fontdata[currentpage][s]['left'], font_top + 1, fontdata[currentpage][s]['left'] + parseInt(_playitem['showFontSize']), font_top + 1);
            }
          }
        }
      }
    }
    this.renderLed(_ctx, _playitem['fontName'], _playitem['fontColor']);

  }
  renderTextRotate270(_txt, _ctx, _i, _playitem, fill) {
    fill = fill == undefined ? true : fill;
    let lineheight = +_playitem['showFontSize'];
    let borderWidth = _playitem['frameMode'] == 0 ? 0 : 1;
    let text_align = _playitem['alignX'];
    let align_vertical = _playitem['alignY'];
    let left, top, w, page, s;
    //根据eq的显示效果调整顶距离
    let topLine = _playitem.lineSpace == 0 ? 0 : parseInt(eqLed[this.fontRelation[_playitem.fontName]][_playitem['fontSize']]['topLine']);
    let addLineSpace = _playitem.lineSpace == 0 ? 0 : parseInt(eqLed[this.fontRelation[_playitem.fontName]][_playitem['fontSize']]['addLineSpace']);
    if (text_align == '0' && align_vertical == '0') {
      left = borderWidth;
      // top = lineheight - Math.ceil(lineheight / 8) + borderWidth;
      top = topLine + lineheight - Math.ceil(lineheight / 8) + borderWidth;
      w = 0;
      page = 1;
      s;
      for (s = 0; s < _txt.length; s++) {
        var space_font = 0;
        w = _txt[s] == '\n' ? 0 : parseInt(_ctx.measureText(_txt[s]).width);
        //换行
        if (_txt[s] == '\n' || (left + w > _ctx.canvas.width / this.pro.zoom && w <= _ctx.canvas.width / this.pro.zoom)) {
          left = 0;
          if (top + Math.ceil(lineheight / 8) + lineheight + parseInt(_playitem['lineSpace']) + addLineSpace > _ctx.canvas.height / this.pro.zoom - borderWidth) {
            //分页
            page++;
            top = topLine + lineheight - Math.ceil(lineheight / 8) + borderWidth;
          } else {
            top += lineheight + parseInt(_playitem['lineSpace']) + addLineSpace;
            if (_txt[s] == '\n') {
              space_font = 0;
              left = -w;
            }
          }
        }
        if (page == this.partitions_helpdata[_i]['currentpage'] && fill) {
          if (!_txt[s] == '\n') {
            _ctx.fillText(_txt[s], left, top);
            if (_playitem['isUnderline']) {
              this.renderUnderline(_ctx, left, top + 1, left + parseInt(_playitem['showFontSize']), top + 1);
            }
          }
        }
        left += w + space_font;
        if (fill) {
          this.partitions_helpdata[_i]['currentTotalpage'] = page;
        } // 总页数
      }
      if (!fill) return page;
    } else {
      left = borderWidth;
      top = topLine + lineheight - Math.ceil(lineheight / 8) + borderWidth;
      w = 0;
      page = 1;
      let fontdata = [];
      let space;
      let line = [];
      let l;
      s;
      let row_total = [];
      row_total[page] = 1;
      fontdata[page] = [];
      let txt_obj = this.tokenization(_playitem);
      for (s = 0; s < txt_obj.length; s++) {
        space_font = 0;
        _ctx.font = (txt_obj[s][4] ? 'bold' : '') + ' ' + (txt_obj[s][5] ? 'italic' : '') + ' ' + parseInt(txt_obj[s][3]) + 'px ' + txt_obj[s][1];
        w = txt_obj[s][0] == '\n' ? 0 : Math.ceil(_ctx.measureText(txt_obj[s][0]).width); // 取得文字宽度
        if (txt_obj[s][0] == '\n' || (left + w > _ctx.canvas.width / this.pro['zoom'] && w <= _ctx.canvas.width / this.pro['zoom'])) {
          space = _ctx.canvas.width / this.pro['zoom'] - left;
          for (l in line) {
            if (text_align == '1') {
              fontdata[page][line[l]]['left'] += parseInt((space + space_font) / 2);
            } else if (text_align == '2') {
              fontdata[page][line[l]]['left'] += parseInt(space + space_font);
              if (fontdata[page][fontdata[page].length] == undefined) {
                fontdata[page][fontdata[page].length - 1]['left'] = _ctx.canvas.width / this.pro['zoom'] - w;
              }
            }
          }
          line = [];
          left = borderWidth;
          if (top + Math.ceil(lineheight / 8) + lineheight + parseInt(_playitem['lineSpace']) + addLineSpace > _ctx.canvas.height / this.pro['zoom'] - borderWidth) {
            //分页
            page++;
            fontdata[page] = [];
            top = topLine + lineheight - Math.ceil(lineheight / 8) + borderWidth;
            row_total[page] = 1;
          } else {
            top += lineheight + parseInt(_playitem['lineSpace']) + addLineSpace;
            row_total[page]++;
            if (txt_obj[s][0] == '\n') space_font = 0;
          }
        }
        line.push(s);
        fontdata[page][s] = { text: txt_obj[s], left: left, top: top };
        left += w + space_font;
        if (fill) this.partitions_helpdata[_i]['currentTotalpage'] = page; // 总页数
      }
      if (!fill) return page;
      space = _ctx.canvas.width / this.pro['zoom'] - left;
      for (l in line) {
        if (text_align == '1') {
          fontdata[page][line[l]]['left'] += parseInt((space + space_font) / 2);
        } else if (text_align == '2') {
          fontdata[page][line[l]]['left'] += parseInt(space + space_font);
          if (fontdata[page][fontdata[page].length] == undefined) {
            fontdata[page][fontdata[page].length - 1]['left'] = _ctx.canvas.width / this.pro['zoom'] - w;
          }
        }
      }
      lineheight = parseInt(_playitem['showFontSize']) + parseInt(_playitem['lineSpace']) + addLineSpace;
      var currentpage = this.partitions_helpdata[_i]['currentpage'];
      var row_num = 0;
      var curr_top = 0;
      var font_top = 0;
      var canvasHeight = parseInt(_ctx.canvas.height / this.pro['zoom']);
      var row = Math.floor(canvasHeight / lineheight);
      for (s in fontdata[currentpage]) {
        if (!fontdata[currentpage][s]['text'][0] == '\n') {
          _ctx.font =
            (fontdata[currentpage][s]['text'][4] ? 'bold' : '') +
            ' ' +
            (fontdata[currentpage][s]['text'][5] ? 'italic' : '') +
            ' ' +
            parseInt(fontdata[currentpage][s]['text'][3]) +
            'px ' +
            fontdata[currentpage][s]['text'][1];
          _ctx.fillStyle = fontdata[currentpage][s]['text'][2];
          if (curr_top < fontdata[currentpage][s]['top']) {
            curr_top = fontdata[currentpage][s]['top'];
            row_num++;
            if (align_vertical == '1') {
              //font_top = (canvasHeight-row_total[currentpage]*lineheight) / 2 + (lineheight*row_num)-(Math.ceil(lineheight/2))+6;
              _ctx.textBaseline = 'middle';
              font_top = canvasHeight / 2 - (row_total[currentpage] - 1) * (lineheight / 2) + (row_num - 1) * lineheight;
              if (_playitem['fontName'] == '微软雅黑') font_top = font_top + 2;
            } else if (align_vertical == '2') {
              font_top = (row - (row_total[currentpage] - row_num)) * lineheight + Math.floor(((canvasHeight / lineheight) % 1) * lineheight) - Math.ceil(lineheight / 8);
            } else {
              font_top = fontdata[currentpage][s]['top'];
            }
          }
          _ctx.fillText(fontdata[currentpage][s]['text'][0], fontdata[currentpage][s]['left'], font_top);
          if (_playitem['isUnderline']) {
            if (align_vertical == '1') {
              this.renderUnderline(
                _ctx,
                fontdata[currentpage][s]['left'],
                font_top + parseInt(_playitem['showFontSize']) / 2,
                fontdata[currentpage][s]['left'] + parseInt(_playitem['showFontSize']),
                font_top + parseInt(_playitem['showFontSize']) / 2
              );
            } else {
              this.renderUnderline(_ctx, fontdata[currentpage][s]['left'], font_top + 1, fontdata[currentpage][s]['left'] + parseInt(_playitem['showFontSize']), font_top + 1);
            }
          }
          if (text_align == '2') {
            if (fontdata[currentpage][s]['text'][0] == '\n' && fontdata[currentpage][s - 1] != undefined) {
              _ctx.fillText(
                fontdata[currentpage][s - 1]['text'][0],
                fontdata[currentpage][s - 1]['left'] - parseInt(fontdata[currentpage][s - 1]['text'][3]),
                fontdata[currentpage][s - 1]['top']
              );
            }
            if (_playitem['isUnderline']) {
              if (align_vertical == '1') {
                this.renderUnderline(
                  _ctx,
                  fontdata[currentpage][s]['left'],
                  font_top + parseInt(_playitem['showFontSize']) / 2,
                  fontdata[currentpage][s]['left'] + parseInt(_playitem['showFontSize']),
                  font_top + parseInt(_playitem['showFontSize']) / 2
                );
              } else {
                this.renderUnderline(_ctx, fontdata[currentpage][s]['left'], font_top + 1, fontdata[currentpage][s]['left'] + parseInt(_playitem['showFontSize']), font_top + 1);
              }
            }
          }
        }
      }
    }
  }
  renderTimeWindow(_txt, _ctx, _i, _playitem, fill) {
    fill = fill == undefined ? true : fill;
    var lineheight = +_playitem['showFontSize'];
    var borderWidth = _playitem['frameMode'] == 0 ? 0 : 1;
    let left, top, w, page, s, space_font;
    left = borderWidth;
    top = lineheight - Math.ceil(lineheight / 8) + borderWidth;
    w = 0;
    page = 1;
    let fontdata = [];
    let space;
    let line = [];
    let l;
    s;
    let row_total = [];
    row_total[page] = 1;
    fontdata[page] = [];
    let txt_obj = this.tokenization(_playitem);
    for (s = 0; s < txt_obj.length; s++) {
      space_font = 0;
      _ctx.font = (txt_obj[s][4] ? 'bold' : '') + ' ' + (txt_obj[s][5] ? 'italic' : '') + ' ' + parseInt(txt_obj[s][3]) + 'px ' + txt_obj[s][1];
      w = txt_obj[s][0] == '\n' ? 0 : Math.ceil(_ctx.measureText(txt_obj[s][0]).width); // 取得文字宽度
      if (txt_obj[s][0] == '\n') {
        if (_playitem.isMoreLine == '1') {
          space = _ctx.canvas.width / this.pro['zoom'] - left;
          for (l in line) {
            fontdata[page][line[l]]['left'] += parseInt((space + space_font) / 2);
          }
          line = [];
          left = borderWidth;
          if (top + Math.ceil(lineheight / 8) + lineheight + parseInt(_playitem['lineSpace']) <= _ctx.canvas.height / this.pro['zoom'] - borderWidth) {
            top += lineheight + parseInt(_playitem['lineSpace']);
            row_total[page]++;
            if (txt_obj[s][0] == '\n') space_font = 0;
          }
        }
      }
      line.push(s);
      fontdata[page][s] = { text: txt_obj[s], left: left, top: top };
      left += w + space_font;
      if (fill) this.partitions_helpdata[_i]['currentTotalpage'] = page; // 总页数
    }
    if (!fill) return page;
    space = _ctx.canvas.width / this.pro['zoom'] - left;
    for (l in line) {
      fontdata[page][line[l]]['left'] += parseInt((space + space_font) / 2);
    }

    lineheight = parseInt(_playitem['showFontSize']) + parseInt(_playitem['lineSpace']);
    var currentpage = this.partitions_helpdata[_i]['currentpage'];
    var row_num = 0;
    var curr_top = 0;
    var font_top = 0;
    var canvasHeight = parseInt(_ctx.canvas.height / this.pro['zoom']);
    let offX = 0;
    if (_playitem.isMoreLine == '0') {
      let lastLeft = fontdata[currentpage][fontdata[currentpage].length - 1]['left'];
      let size = parseInt(fontdata[currentpage][fontdata[currentpage].length - 1]['text'][3]);
      if (lastLeft + size > _ctx.canvas.width / this.pro['zoom']) {
        offX = (lastLeft + size - _ctx.canvas.width / this.pro['zoom']) / 2;
      }
    }
    for (s in fontdata[currentpage]) {
      if (!fontdata[currentpage][s]['text'][0] == '\n') {
        _ctx.font =
          (fontdata[currentpage][s]['text'][4] ? 'bold' : '') +
          ' ' +
          (fontdata[currentpage][s]['text'][5] ? 'italic' : '') +
          ' ' +
          parseInt(fontdata[currentpage][s]['text'][3]) +
          'px ' +
          fontdata[currentpage][s]['text'][1];
        _ctx.fillStyle = fontdata[currentpage][s]['text'][2];
        if (curr_top < fontdata[currentpage][s]['top']) {
          curr_top = fontdata[currentpage][s]['top'];
          row_num++;
          _ctx.textBaseline = 'middle';
          font_top = canvasHeight / 2 - (row_total[currentpage] - 1) * (lineheight / 2) + (row_num - 1) * lineheight;
          if (_playitem['fontName'] == '微软雅黑') font_top = font_top + 2;
        }
        //单行时间内容超出屏幕，居中显示
        if (offX > 0) {
          _ctx.fillText(fontdata[currentpage][s]['text'][0], fontdata[currentpage][s]['left'] - offX, font_top);
        } else {
          _ctx.fillText(fontdata[currentpage][s]['text'][0], fontdata[currentpage][s]['left'], font_top);
        }
      }
    }
  }
  setForm(form) {
    this.stopAni();
    this.form = form;
    for (let key in this.form) {
      if (key == 'x' || key == 'y' || key == 'width' || key == 'height') {
        continue;
      } else {
        this.windowInfoList[this.partitionActiveID][key] = this.form[key];
      }
    }
    //单行文本，\n\t都去掉
    if (this.windowInfoList[this.partitionActiveID].type == 1) {
      this.windowInfoList[this.partitionActiveID].content = this.windowInfoList[this.partitionActiveID].content.replace('\n', '').replace('\t', '');
    }
    //多行文本\t改成两个空格
    if (this.windowInfoList[this.partitionActiveID].type == 2) {
      this.windowInfoList[this.partitionActiveID].content = this.windowInfoList[this.partitionActiveID].content.replace('\t', '  ');
    }
    console.log(this.windowInfoList[this.partitionActiveID]);
    this.updatePartitionBlock();
  }
  //返回窗口集合数据
  getForm() {
    return this.windowInfoList;
  }
  //判断是否重叠
  isStacked() {
    return this.partitionStacked;
  }
  //创建表格
  createTable(form, isManual) {
    this.form = form;
    let _zoom = this.pro.zoom < 2 ? 2 : this.pro.zoom;
    // let faceFont = this.form.fontSize;
    let fontS = this.form.showFontSize;
    let fontSize = fontS * _zoom;
    const { fontColor, rowCount, colCount, fontName, isBold, isItalic, key } = this.form;
    const fontWeight = isBold ? 'bold' : 'normal';
    const fontStyle = isItalic ? 'italic' : 'normal';
    const alignX = this.form.alignX == 0 ? 'left' : this.form.alignX == 1 ? 'center' : 'right';
    let tableBorder = fontColor;
    let tableWidth = parseInt(this.windowInfoList[this.partitionActiveID]['width'] * _zoom);
    let tableHeight = parseInt(this.windowInfoList[this.partitionActiveID]['height'] * _zoom);
    let h = Math.floor(tableHeight / rowCount);
    let w = Math.floor(tableWidth / colCount);
    // let maxRow = Math.floor(tableHeight / fontSize);
    // let maxColumn = Math.floor(tableWidth / fontSize);
    // if (rowCount > maxRow) {
    //   this.message.warning(`${faceFont} + "号字体下，分区高度只能创建" + ${maxRow} + "行表格"`)
    //   return false;
    // }
    // if (colCount > maxColumn) {
    //   this.message.warning(`${faceFont} + "号字体下，分区宽度只能创建" + ${maxColumn} + "列表格"`)
    //   return false;
    // }
    let html = '';

    html += '<table class="table-box" cellspacing="0" cellpadding="0" style="width:' + tableWidth + 'px;height:' + tableHeight + 'px">';
    //添加表格
    if (this.pageType == 1) {
      for (let i = 0; i < rowCount; i++) {
        html += '<tr>';
        for (let k = 0; k < colCount; k++) {
          html += '<td style="width: ' + w + 'px;height: ' + h + 'px;border-color: ' + tableBorder + '">';
          html +=
            '<input class="table-input" style="text-align:' +
            alignX +
            ';width: ' +
            w +
            'px;height: ' +
            h +
            'px;color: ' +
            fontColor +
            ';font-family: ' +
            fontName +
            ';font-weight: ' +
            fontWeight +
            ';font-style: ' +
            fontStyle +
            ';font-size: ' +
            fontSize +
            'px" type="text" />';
          html += '<span class="dra-y"></span><span class="dra-x"></span>';
          html += '</td>';
        }
        html += '</tr>';
      }
    } else {
      //编辑表格不是手动创建
      if (!isManual) {
        for (let i = 0; i < rowCount; i++) {
          html += '<tr>';
          for (let k = 0; k < colCount; k++) {
            html +=
              '<td style="width: ' +
              this.form.widthArr[i * colCount + k] * this.pro.zoom +
              'px;height: ' +
              this.form.heightArr[i * colCount + k] * this.pro.zoom +
              'px;border-color: ' +
              tableBorder +
              '">';
            html +=
              '<input class="table-input" style="text-align:' +
              alignX +
              ';width: ' +
              this.form.widthArr[i * colCount + k] * this.pro.zoom +
              'px;height: ' +
              this.form.heightArr[i * colCount + k] * this.pro.zoom +
              'px;color: ' +
              fontColor +
              ';font-family: ' +
              fontName +
              ';font-weight: ' +
              fontWeight +
              ';font-style: ' +
              fontStyle +
              ';font-size: ' +
              fontSize +
              'px" type="text" value="' +
              this.form.innerContent[i * colCount + k] +
              '" />';
            html += '<span class="dra-y"></span><span class="dra-x"></span>';
            html += '</td>';
          }
          html += '</tr>';
        }
      } else {
        for (let i = 0; i < rowCount; i++) {
          html += '<tr>';
          for (let k = 0; k < colCount; k++) {
            html += '<td style="width: ' + w + 'px;height: ' + h + 'px;border-color: ' + tableBorder + '">';
            html +=
              '<input class="table-input" style="text-align:' +
              alignX +
              ';width: ' +
              w +
              'px;height: ' +
              h +
              'px;color: ' +
              fontColor +
              ';font-family: ' +
              fontName +
              ';font-weight: ' +
              fontWeight +
              ';font-style: ' +
              fontStyle +
              ';font-size: ' +
              fontSize +
              'px" type="text" />';
            html += '<span class="dra-y"></span><span class="dra-x"></span>';
            html += '</td>';
          }
          html += '</tr>';
        }
      }
    }

    html += '</table>';
    $(`#table${key} .table-main`)
      .css({
        width: tableWidth + 'px',
        height: tableHeight + 'px',
      })
      .html(html);
    $(`#table${key} .tongxingzheng-size`)
      .css({
        width: tableWidth + 'px',
        height: tableHeight + 'px',
      })
      .html(this.windowInfoList[this.partitionActiveID]['width'] + '×' + this.windowInfoList[this.partitionActiveID]['height']);
    this.draY();
    this.draX();
  }
  draY() {
    //拖动
    let isResizing = false;
    let resizor = $('.dra-y');
    let $this, next_w, this_w;

    resizor.on('mousedown', (e) => {
      e.stopPropagation();
      $this = $(e.currentTarget);
      isResizing = true;
      this_w = $this.parent().outerWidth();
      next_w = $this.parent().next().outerWidth();
      if ($this.parent().next().length == 0) isResizing = false;
    });

    $(document)
      .on('mousemove', (e) => {
        e.stopPropagation();
        if (!isResizing) return true;

        let offsetX = e.clientX - $this.parent().offset().left - this_w;

        $this.parent().outerWidth(this_w + offsetX);
        $this.siblings('input').css({ width: '100%' });

        $this
          .parent()
          .next()
          .outerWidth(next_w - offsetX);
        $this.parent().next().find('input').css({ width: '100%' });
        const i = $this.parent().index();
        $this
          .parent()
          .parent()
          .parent()
          .find('tr')
          .each((index, item) => {
            $(item)
              .children('td')
              .eq(i)
              .css({ width: this_w + offsetX });
            $(item)
              .children('td')
              .eq(i)
              .find('input')
              .css({ width: this_w + offsetX });
            $(item)
              .children('td')
              .eq(i + 1)
              .css({ width: next_w - offsetX });
            $(item)
              .children('td')
              .eq(i + 1)
              .find('input')
              .css({ width: next_w - offsetX });
          });
      })
      .on('mouseup', (e) => {
        e.stopPropagation();
        e.preventDefault();
        isResizing = false;
      });
  }
  draX() {
    //拖动
    let isResizing = false;
    let resizor = $('.dra-x');
    let this_h, $this, next_h;

    resizor.on('mousedown', (e) => {
      e.stopPropagation();
      $this = $(e.currentTarget);
      isResizing = true;
      this_h = $this.parent().outerHeight();
      next_h = $this.parents('tr').next().children('td').outerHeight();
      if ($this.parents('tr').next().children('td').length == 0) isResizing = false;
    });

    $(document)
      .on('mousemove', (e) => {
        e.stopPropagation();
        if (!isResizing) return true;

        let offsetY = e.clientY - $this.parent().offset().top - this_h;

        $this
          .parents('tr')
          .children('td')
          .outerHeight(this_h + offsetY);
        $this
          .parents('tr')
          .children('td')
          .find('input')
          .height(this_h + offsetY);

        $this
          .parents('tr')
          .next()
          .children('td')
          .outerHeight(next_h - offsetY);
        $this.parents('tr').next().children('td').find('input').css({
          height: '100%',
        });
      })
      .on('mouseup', (e) => {
        e.stopPropagation();
        e.preventDefault();
        isResizing = false;
      });
  }
  saveTable(form) {
    console.log(form);
    this.pageType = 1;
    //复制一个元素用于截图，input换成div因为input会错位
    let cloneDom = $(`#table${form.key} .table-main`)
      .clone(true)
      .appendTo($(`#table${form.key} .content`));
    cloneDom.addClass('cloneDom');
    $(`#table${form.key} .cloneDom .table-input`).each((index, item) => {
      let ta = $(item).css('text-align');
      let fs = $(item).css('font-size');
      let c = $(item).css('color');
      let w = $(item).css('width');
      let h = parseInt($(item).css('height')) - 1 + 'px';
      let h1 = parseInt($(item).css('height')) - 2 + 'px';
      let fn = $(item).css('font-family');
      let fw = $(item).css('font-weight');
      let fstyle = $(item).css('font-style');
      $(item)
        .parent()
        .html(
          `<div style="font-family:${fn};font-weight:${fw};font-style:${fstyle};overflow:hidden;text-align:${ta};font-size:${fs};color:${c};width:${w};height:${h};line-height:${h1}">` +
            $(item).val() +
            '</div>'
        );
    });
    this.getTableContent(form);
    setTimeout(() => {
      html2canvas($(`#table${form.key} .table-main`)[1], {
        useCORS: true,
        allowTaint: true,
        width: $(`#table${form.key} .table-main`).width(),
        height: $(`#table${form.key} .table-main`).height(),
      }).then((canvas) => {
        let imgUri = canvas.toDataURL(); // 获取生成的图片的url
        this.windowInfoList[this.partitionActiveID]['path'] = imgUri;
        this.windowInfoList[this.partitionActiveID]['tableUrl'] = imgUri;
        this.ImageReSizeBmp(imgUri, this.windowInfoList[this.partitionActiveID]);
        this.updatePartitionBlock(true);
        $(`#table${form.key} .cloneDom`).remove();
        this.bus.$emit('closeLoading');
        // let blob = canvasToImage(canvas);
        // let formData = new FormData();
        // formData.append('file', blob,'image.jpg');
        // upload(formData).then((res) => {
        //   if (res.data.code == 0) {
        //     console.log(res.data.data);
        //     let url = res.data.data.url;
        //     this.windowInfoList[this.partitionActiveID].tableUrl = url;
        //     let imgUri = canvas.toDataURL(); // 获取生成的图片的url
        //     this.windowInfoList[this.partitionActiveID]["path"] = imgUri;
        //     this.ImageReSizeBmp(imgUri,this.windowInfoList[this.partitionActiveID]);
        //     this.updatePartitionBlock();
        //     $(`#table${form.key} .cloneDom`).remove();
        //   }
        // })
      });
    }, 500);
  }
  //获取表格各单元格的数据
  getTableContent(form) {
    const { key, fontSize, fontName, alignX } = form;
    let contentArr = [];
    let rowSpan = $(`#table${key} .table-main tr:first`).children().length; //每行单元格数
    let originPoint = {
      x: +this.windowInfoList[this.partitionActiveID].x,
      y: +this.windowInfoList[this.partitionActiveID].y,
    };
    var areaCommon = {};
    $(`#table${key} .table-main:eq(0) td`).each((i, item) => {
      if (i == 0) {
        areaCommon = {
          x: originPoint.x,
          y: originPoint.y,
          width: Math.floor($(item).outerWidth() / this.pro.zoom),
          height: Math.floor($(item).outerHeight() / this.pro.zoom),
        };
      } else {
        //换行的时候
        if (i % rowSpan == 0) {
          areaCommon = {
            x: +this.windowInfoList[this.partitionActiveID].x,
            y:
              areaCommon.y +
              Math.floor(
                $(`#table${key} .table-main td`)
                  .eq(i - rowSpan)
                  .outerHeight() / this.pro.zoom
              ) - 1,
            width: Math.floor($(item).outerWidth() / this.pro.zoom),
            height: Math.floor($(item).outerHeight() / this.pro.zoom),
          };
        } else {
          areaCommon = {
            x: areaCommon.x + areaCommon.width - 1,
            y: areaCommon.y,
            width: Math.floor($(item).outerWidth() / this.pro.zoom),
            height: Math.floor($(item).outerHeight() / this.pro.zoom),
          };
        }
      }
      contentArr.push({
        content: $(item).children().eq(0).val() == '' ? ' ' : $(item).children().eq(0).val(),
        fontCommon: {
          fontName: fontName,
          fontSize: fontSize,
          fontColor: this.windowInfoList[this.partitionActiveID].fontColor,
          alignX: alignX,
          alignY: this.windowInfoList[this.partitionActiveID].alignY,
          isBold: this.windowInfoList[this.partitionActiveID].isBold,
          isItalic: this.windowInfoList[this.partitionActiveID].isItalic,
          isUnderline: this.windowInfoList[this.partitionActiveID].isUnderline,
          lineSpace: this.windowInfoList[this.partitionActiveID].lineSpace,
        },
        areaCommon: areaCommon,
        actionCommon: {
          actionType: this.windowInfoList[this.partitionActiveID].actionType,
          actionSpeed: this.windowInfoList[this.partitionActiveID].actionSpeed,
          holdTime: this.windowInfoList[this.partitionActiveID].holdTime,
        },
      });
    });
    console.log(contentArr);
    this.windowInfoList[this.partitionActiveID]['contentArr'] = contentArr;
  }
  ImageReSizeBmp(path, playitem) {
    if ($('#ImageBmp').length <= 0) {
      $('.Play-tab .view').append('<canvas id="ImageBmp" style="display:none"></canvas>');
    }

    let image = new Image();
    image.src = path;
    image.onload = function () {
      let imageBmpCtx = document.getElementById('ImageBmp');
      imageBmpCtx.width = playitem.width;
      imageBmpCtx.height = playitem.height;
      let _ctx = imageBmpCtx.getContext('2d');

      _ctx.drawImage(image, 0, 0, playitem.width, playitem.height);

      //delete itemdata.path;

      //var binary = pako.gzip(image.src , {to : 'string'});

      // itemdata.bmp_path = window.program.canvasToDataURL(imageBmpCtx);
      // itemdata.zip_path = image.src;
      // itemdata.compress = "GZIP";
    };
  }
  getImageUrl(_path) {
    if (_path != undefined) {
      if (_path.indexOf('data:image') == 0) {
        return _path;
      } else if (_path == '') {
        return ''; //空白gif
      } else if (_path.indexOf('http://') == 0 || _path.indexOf('https://') == 0) {
        return _path;
      } else {
        return window.location.protocol + '//' + window.location.host + _path;
      }
    }
  }
  setTableFontSize(showFontSize) {
    this.form.showFontSize = showFontSize;
    $('.table-box input').css({
      'font-size': +this.form.showFontSize * this.pro.zoom + 'px',
    });
  }
  setRowCount(count){
    console.log(count);
    this.form.rowCount = count;
  }
  setColCount(count){
    this.form.colCount = count;
  }
  //播放动画
  playAni() {
    this.updateAnimationBlock();
  }
  stopAni() {
    for (let i = 0; i < this.animationArr.length; i++) {
      clearInterval(this.animationArr[i]);
    }
    this.animationArr = [];
  }
  tabsChange(key) {
    $(`.sid${key} .item_title`).click();
  }
}
